Ilgų žodžių ir URL tvarkymas (pertraukų, brūkšnelių, elipsės ir kt. Verčiama) CSS-gudrybės

Turinys

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 naudoti word-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 tik word-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; )

Įdomios straipsniai...