Kartais būna, kad išties ilga teksto eilutė gali perpildyti maketo talpyklą.
Pavyzdžiui:
Štai samtelis:
overflow-wrap: break-word;įsitikina, kad ilga virvelė apvynios ir neišsipūs iš indo. Jūs taip pat galite naudotiword-wrap, nes, kaip sako specifikacija, jie tiesiogine prasme yra tik pakaitiniai vienas kito pavadinimai. Kai kurios naršyklės palaiko vieną, o ne kitą. „Firefox“ (išbandytas v43) palaiko tikword-wrap. „Blink“ (išbandyta „Chrome v45“) reikės vieno iš jų.- Visiškai
overflow-wrapvartojant žodžius, jie sugadins bet kur, kur reikia. Jei yra „priimtino lūžio“ simbolis (pavyzdžiui, pažodinis brūkšnys), jis ten nutrūks, kitaip jis tiesiog daro tai, ką reikia padaryti. - Taip pat galite naudoti
hyphens, nes tada jis bandys skoningai pridėti brūkšnį ten, kur jis nutrūksta, jei naršyklė jį palaiko („Blink“ ne rašymo metu, „Firefox“ palaiko). word-break: break-all;yra pasakyti naršyklei, kad gerai laužyti žodį visur, kur reikia. Nors tai vis tiek daro, todėl nesu tikras, kokiais atvejais tai yra 100% būtina.
Jei norite, kad su brūkšneliais būtų daugiau rankinių, galite juos pasiūlyti savo žymėjime. Daugiau žiūrėkite MDN puslapyje.
Naršyklės palaikymas
Už word-break:
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 9.0–9.2 |
Už hypens:
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 4,2–4,3 * |
Už overflow-wrap:
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0–7,1 |
Už text-overflow:
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Apsauga nuo perpildymo elipsės būdu
Kitas apsvarstomas požiūris yra viso teksto sutrumpinimas ir elipsių pridėjimas ten, kur teksto eilutė patenka į konteinerį:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Šis naudingas dalykas text-overflowyra tai, kad jis yra visuotinai palaikomas.
Pavyzdžiai
Peržiūrėkite „CSS-Tricks“ rašomuosius rašmenis „Hyphenate Long Words“ (@ css-tricks) „CodePen“.
„CodePen“ ieškokite CSS-Tricks „Pen Ellipses“ (@ css-tricks).
Žr. Chriso Coyier'io (@chriscoyier) „Pen Figuring Out Line Wrapping“ iš „CodePen“.
Daugiau išteklių
- Michael Scharnagl: Ilgų žodžių sprendimas CSS
- Kennethas Auchenbergas: žodžių įvedimas / brūkšniavimas naudojant CSS
- MDN: žodžių rinkimas, žodžių laužymas, brūkšneliai
- Specifikacija: CSS 3 lygio tekstas
SCSS linkusiems
Tai paprastai yra tokie dalykai, kuriuos reikia pabarstyti kodu, todėl jie tinka gražiams @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; )