Postoje slučajevi kada stvarno dugački niz teksta može preplaviti spremnik izgleda.
Na primjer:
Evo žlice:
overflow-wrap: break-word;osigurava da se dugački niz omota i da ne iscuri iz spremnika. Mogli biste i dobro upotrijebitiword-wrapjer, kako kaže specifikacija, to su doslovno samo zamjenska imena jedno za drugo. Neki preglednici podržavaju jedan, a ne drugi. Firefox (testiran v43) podržava samoword-wrap. Treptaj (testirani Chrome v45) trajat će bilo koji.- Kad se
overflow-wrapkoriste same za sebe, riječi će se slomiti nekako bilo gdje gdje trebaju. Ako postoji znak "prihvatljiva prijelomnica" (poput doslovne crtice, na primjer), tamo će se razbiti, inače samo radi ono što treba. - Mogli biste i upotrijebiti
hyphens, jer će tada pokušati s ukusom dodati crticu na mjestu gdje se prekida ako ga preglednik podržava (Blink to ne čini u vrijeme pisanja, Firefox to čini). word-break: break-all;je reći pregledniku da je u redu prekinuti riječ gdje god treba. Iako to ionako nekako čini, pa nisam siguran u kojim je slučajevima to 100% potrebno.
Ako želite biti ručniji s crticama, možete ih predložiti u svom označavanju. Pogledajte više na MDN stranici.
Podrška preglednika
Za word-break:
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Za hypens:
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Za overflow-wrap:
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Za text-overflow:
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Sprječavanje prelijevanja elipsom
Drugi pristup koji treba razmotriti je skraćivanje teksta i dodavanje elipsa tamo gdje niz teksta pogodi spremnik:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Ova lijepa stvar kod korištenja text-overflowje što je podržana univerzalno.
Primjeri
Pogledajte Long Hyphenate Long Words od CSS-Tricks (@ css-tricks) na CodePen-u.
Pogledajte Pen Ellipses by CSS-Tricks (@ css-tricks) na CodePenu.
Pogledajte olovku kako otkriva umotavanje crta Chrisa Coyiera (@chriscoyier) na CodePenu.
Više resursa
- Michael Scharnagl: Suočavanje s dugim riječima u CSS-u
- Kenneth Auchenberg: Omotavanje riječi / crtica pomoću CSS-a
- MDN: prelom riječi, prelom riječi, crtice
- Specifikacija: CSS nivo teksta 3
Za SCSS naklonjene
To su obično stvari koje posipate u kod gdje je potrebno, pa čine lijepe @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; )