Der er tidspunkter, hvor en rigtig lang tekststreng kan løbe over containerens layout.
For eksempel:
Her er scoop:
overflow-wrap: break-word;sørger for, at den lange snor ombrydes og ikke bryder ud af beholderen. Du kan lige så godt brugeword-wrapdet også, for som specifikationen siger, er de bogstaveligt talt bare alternative navne for hinanden. Nogle browsere understøtter den ene og ikke den anden. Firefox (testet v43) understøtter kunword-wrap. Blink (testet Chrome v45) tager en af dem.- Med
overflow-wrapi brug i sig selv vil ord bryde lidt hvor som helst de har brug for. Hvis der er et "acceptabelt brud" -karakter (som f.eks. Et bogstaveligt bindestreg), vil det bryde der, ellers gør det bare, hvad det skal gøre. - Du kan lige så godt bruge
hyphensdet også, for så forsøger det smagfuldt at tilføje en bindestreg, hvor den går i stykker, hvis browseren understøtter den (Blink gør det ikke i skrivende stund, Firefox gør det). word-break: break-all;er at fortælle browseren, at det er OK at bryde ordet, hvor det måtte være nødvendigt. Selvom det gør det alligevel, så jeg er ikke sikker på, i hvilke tilfælde det er 100% nødvendigt.
Hvis du vil være mere manuel med bindestreger, kan du foreslå dem i din markering. Se mere på MDN-siden.
Browsersupport
Til word-break:
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Til hypens:
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Til overflow-wrap:
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Til text-overflow:
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Forebyggelse af overstrømning med ellips
En anden fremgangsmåde at overveje er at afkorte teksten helt og tilføje ellipser, hvor tekststrengen rammer beholderen:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Denne gode ting ved at bruge text-overflower, at den understøttes universelt.
Eksempler
Se Pen-bindestreg lange ord af CSS-Tricks (@ css-tricks) på CodePen.
Se Pen Ellipses af CSS-Tricks (@ css-tricks) på CodePen.
Se Pen Figuring Out Line Wrapping af Chris Coyier (@chriscoyier) på CodePen.
Flere ressourcer
- Michael Scharnagl: Beskæftiger sig med lange ord i CSS
- Kenneth Auchenberg: Ordindpakning / orddeling med CSS
- MDN: word-wrap, word-break, bindestreger
- Spec: CSS-tekstniveau 3
Til SCSS-skrå
Disse har tendens til at være den slags ting, du sprøjter i kode, hvor det er nødvendigt, så de giver gode @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; )