Včasih lahko res dolg niz besedila preplavi vsebnik postavitve.
Na primer:
Tukaj je zajemalka:
overflow-wrap: break-word;poskrbi, da se dolga vrvica zavije in ne izpade iz posode. Lahko tudi uporabiteword-wrap, ker kot pravi specifikacija, so dobesedno samo nadomestni imeni drug za drugega. Nekateri brskalniki podpirajo enega, drugega pa ne. Firefox (preizkušen v43) podpira samoword-wrap. Utripanje (preizkušeni Chrome v45) bo trajalo eno.- Z
overflow-wrapuporabo samega sebe bodo besede nekako zrušile kjerkoli je treba. Če je znak "sprejemljiv prelom" (na primer črka dobesedno), se bo tam prekinil, sicer le naredi, kar mora. - Lahko tudi uporabite
hyphens, ker bo potem skušal z okusom dodati vezaj, kjer se pokvari, če ga brskalnik podpira (Blink v času pisanja ne, Firefox pa). word-break: break-all;je povedati brskalniku, da je v redu, če besedo prekinete, kjer koli je treba. Čeprav to nekako počne, zato nisem prepričan, v katerih primerih je to 100% potrebno.
Če želite biti bolj vezani na vezave, jih lahko predlagate v oznaki. Več si oglejte na strani MDN.
Podpora brskalnika
Za word-break:
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 44 | 15. | 5.5 | 12. | 9. |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Za hypens:
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Za overflow-wrap:
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 23. | 49 | 11. | 18. | 6.1 |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Za text-overflow:
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 4. | 7. | 6. | 12. | 3.1 |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Preprečevanje prelivanja z elipso
Drug pristop, ki ga je treba upoštevati, je v celoti okrniti besedilo in dodati elipse, kjer niz besedila zadene vsebnik:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Lepo pri uporabi text-overflowje, da je podprta univerzalno.
Primeri
Oglejte si Long Hyphenate Long Words od CSS-Tricks (@ css-tricks) na CodePen.
Oglejte si Pen Ellipses by CSS-Tricks (@ css-tricks) na CodePen.
Glej Pen Pen Figuring Out Line Wrapping Chrisa Coyierja (@chriscoyier) na CodePen.
Več virov
- Michael Scharnagl: Obravnavanje dolgih besed v CSS
- Kenneth Auchenberg: Zavijanje besed / deljenje besed z uporabo CSS
- MDN: zavijanje besed, prelom besed, vezaji
- Specifikacija: besedilo CSS 3. stopnje
Za SCSS nagnjene
To so ponavadi stvari, ki jih potresete v kodo, kjer je to potrebno, zato naredijo lepe @mixins:
@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )