Sú chvíle, kedy skutočne dlhý reťazec textu môže pretekať cez kontajner rozloženia.
Napríklad:
Tu je lopatka:
overflow-wrap: break-word;dbá na to, aby sa dlhá šnúrka zabalila a nevypadla z nádoby. Môžete tiež použiťword-wraprovnako, pretože ako hovorí špecifikácia, sú to doslova iba alternatívne mená. Niektoré prehľadávače podporujú jeden a druhý nie. Firefox (testovaný v43) podporuje ibaword-wrap. Blink (testovaný Chrome v45) zaberie ktorýkoľvek z nich.- Ak
overflow-wrapsa slová budú používať úplne samo, zlomia sa úplne všade, kde potrebujú. Ak existuje znak „prijateľného zlomu“ (napríklad doslovná pomlčka), zlomí sa tam, inak urobí len to, čo musí. - Môžete tiež použiť
hyphensrovnako, pretože potom sa pokúsi vkusne pridať pomlčku, ktorá sa rozbije, pokiaľ to prehliadač podporuje (Blink v čase písania článku nie, Firefox áno). word-break: break-all;znamená povedať prehliadaču, že je v poriadku porušovať slovo všade, kde je to potrebné. Aj keď to tak nejako robí, takže si nie som istý, v akých prípadoch je to stopercentne potrebné.
Ak chcete byť s pomlčkami manuálnejší, môžete ich navrhnúť vo svojom značení. Viac nájdete na stránke MDN.
Podpora prehliadača
Pre word-break:
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Pre hypens:
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Pre overflow-wrap:
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Pre text-overflow:
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Zabránenie pretečeniu pomocou elipsy
Ďalším prístupom, ktorý je potrebné zvážiť, je úplné skrátenie textu a pridanie elipsy tam, kde reťazec textu zasiahne kontajner:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Táto príjemná vec na používaní text-overflowje, že je podporovaná univerzálne.
Príklady
Pozrite si slovo Long Hyphenate Long Words od CSS-Tricks (@ css-tricks) na stránkach CodePen.
Pozrite si elipsy pera od CSS-Tricks (@ css-tricks) na CodePen.
Prezrite si obalovanie pera od Chrisa Coyiera (@chriscoyier) na stránke CodePen.
Ďalšie zdroje
- Michael Scharnagl: Zaoberanie sa dlhými slovami v CSS
- Kenneth Auchenberg: Zalamovanie a delenie slov pomocou CSS
- MDN: zalomenie slova, zalomenie slova, pomlčky
- Špecifikácia: Text CSS úrovne 3
Pre sklon SCSS
Toto bývajú také veci, ktoré podľa potreby posypete do kódu, takže vytvárajú pekné @mixiny:
@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; )