Jsou chvíle, kdy opravdu dlouhý řetězec textu může přetéct kontejnerem rozložení.
Například:
Tady je lopatka:
overflow-wrap: break-word;zajišťuje, aby se dlouhý řetězec zabalil a nevypadl z kontejneru. Můžete také použítword-wrap, protože, jak říká specifikace, jsou to doslova jen alternativní jména pro sebe navzájem. Některé prohlížeče podporují jeden a druhý nikoli. Firefox (testováno v43) podporuje pouzeword-wrap. Blink (testovaný Chrome v45) bude trvat jeden z nich.- Když
overflow-wrapse slova budou používat úplně sama, slova se trochu zlomí, kdekoli potřebují. Pokud existuje znak „přijatelného zlomu“ (například doslovná pomlčka), zlomí se tam, jinak dělá jen to, co musí. - Můžete také použít
hyphens, protože pak se pokusí vkusně přidat pomlčku, kde se zlomí, pokud to prohlížeč podporuje (Blink v době psaní ne, Firefox ano). word-break: break-all;je říct prohlížeči, že je v pořádku porušit slovo, kdykoli to bude nutné. I když to tak nějak dělá, takže si nejsem jistý, v jakých případech je to 100% nutné.
Pokud chcete být více pomlčkami, můžete je navrhnout ve svém označení. Více na stránce MDN.
Podpora prohlížeče
Pro word-break:
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Pro hypens:
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Pro overflow-wrap:
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Pro text-overflow:
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Zabránění přetečení pomocí elipsy
Dalším přístupem, který je třeba zvážit, je úplné zkrácení textu a přidání elips, kde řetězec textu zasáhne kontejner:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Tato pěkná věc na používání text-overflowje, že je podporována univerzálně.
Příklady
Podívejte se na Pen Hyphenate Long Words od CSS-Tricks (@ css-tricks) na CodePen.
Podívejte se na elipsy pera od CSS-Tricks (@ css-tricks) na CodePen.
Podívejte se na obtékání pera od Chrisa Coyiera (@chriscoyier) na CodePen.
Další zdroje
- Michael Scharnagl: Práce s dlouhými slovy v CSS
- Kenneth Auchenberg: Zalamování / dělení slov pomocí CSS
- MDN: zalamování slov, zalomení slov, pomlčky
- Spec: CSS Text Úroveň 3
Pro sklon SCSS
Jedná se o typ věcí, které pokropíte do kódu, kde je to potřeba, takže vytvářejí pěkné @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; )