Det er tider når en veldig lang tekststreng kan flyte over beholderen til et oppsett.
For eksempel:
Her er scoop:
overflow-wrap: break-word;sørger for at den lange strengen vil vikles og ikke brytes ut av beholderen. Du kan like godt brukeword-wrapdet også, fordi som spesifikasjonen sier, de er bokstavelig talt bare alternative navn for hverandre. Noen nettlesere støtter den ene og ikke den andre. Firefox (testet v43) støtter bareword-wrap. Blink (testet Chrome v45) tar en av dem.- Med
overflow-wrapi bruk i seg selv, vil ord bryte ganske hvor som helst de trenger. Hvis det er et "akseptabelt brudd" -karakter (som for eksempel en bokstavelig strek), vil den bryte der, ellers gjør den bare det den trenger å gjøre. - Du kan like godt bruke
hyphensdet også, for da vil det prøve å legge til et bindestrek smakfullt der det går i stykker hvis nettleseren støtter det (Blink gjør det ikke i skrivende stund, Firefox gjør det). word-break: break-all;er å fortelle nettleseren at det er OK å bryte ordet hvor det måtte være. Selv om det ganske bra gjør det uansett, så er jeg ikke sikker på i hvilke tilfeller det er 100% nødvendig.
Hvis du vil være mer manuell med bindestrek, kan du foreslå dem i markeringen din. Se mer på MDN-siden.
Nettleserstøtte
For word-break:
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
For hypens:
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
For overflow-wrap:
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
For text-overflow:
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Forebygge overflyt med ellips
En annen tilnærming å vurdere er å avkorte teksten helt og legge til ellipser der tekststrengen treffer beholderen:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Denne fine tingen med å bruke text-overflower at den støttes universelt.
Eksempler
Se pennestrekets lange ord av CSS-Tricks (@ css-tricks) på CodePen.
Se Pen Ellipses av CSS-Tricks (@ css-tricks) på CodePen.
Se pennen som skiller ut linjepakning av Chris Coyier (@chriscoyier) på CodePen.
Flere ressurser
- Michael Scharnagl: Å håndtere lange ord i CSS
- Kenneth Auchenberg: Ordinnpakning / orddeling ved hjelp av CSS
- MDN: ordpakning, ordskift, bindestrek
- Spesifikasjon: CSS tekstnivå 3
For SCSS-tilbøyelig
Disse pleier å være den typen ting du strør over i kode der det er nødvendig, så de gir 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; )