overflow-wrapVlastnosť CSS vám umožňuje určiť, že prehliadač môže zlomiť riadok textu vnútri cieľového prvku na viac riadkov v inak nerozbitné mieste. To pomáha vyhnúť sa neobvykle dlhému reťazcu textu, ktorý by spôsobil problémy s rozložením v dôsledku pretečenia.
.example ( overflow-wrap: break-word; )Hodnoty
normal: predvolená hodnota. Prehliadač bude lámať riadky podľa bežných pravidiel pre lámanie riadkov. Slová alebo neprerušované reťazce sa nebudú lámať, aj keď pretekajú cez nádobu.break-word: slová alebo reťazce znakov, ktoré sú príliš veľké na to, aby sa zmestili do ich kontajnera, sa na ľubovoľnom mieste zlomia, aby vynútili zalomenie riadku. Znak pomlčky sa nevloží, aj keď sa tátohyphensvlastnosť použije.inherit: cieľový prvok musí dediť hodnotuoverflow-wrapvlastnosti definovanej na jeho bezprostrednom rodičovi.
Ukážka nižšie má prepínacie tlačidlo, ktoré vám umožňuje prepínať medzi normala break-word.
Prezrite si ukážku overflow-wrap / word-wrap pera od Louisa Lazarisa (@impressivewebs) na CodePen.
Na demonštráciu problému, ktorý sa overflow-wrappokúša vyriešiť, sa v ukážke používa neobvykle dlhé slovo vo vnútri relatívne malého kontajnera. Keď ho break-wordzapnete, slovo sa rozdelí, aby sa do neho zmestilo malé dostupné miesto, akoby to bolo viac slov.
S reťazcom nerozbitných znakov medzery ( ) by sa zaobchádzalo rovnako a na vhodnom mieste by sa tiež zlomili.
overflow-wrapje užitočné pri použití na prvky, ktoré obsahujú nemoderovaný obsah generovaný používateľom (napríklad sekcie komentárov). To môže zabrániť tomu, aby dlhé adresy URL a iné neprerušené textové reťazce (napr. Vandalizmus) narušili rozloženie webovej stránky.
Podobnosti s word-breakmajetkom
overflow-wrapa word-breaksprávajú sa veľmi podobne a dajú sa použiť na riešenie podobných problémov. Základné zhrnutie rozdielu, ako je vysvetlené v špecifikácii CSS, je:
overflow-wrapsa zvyčajne používa na zabránenie problémom s dlhými reťazcami, ktoré spôsobujú rozbité rozloženie v dôsledku prúdenia textu mimo kontajner.word-breakurčuje možnosti mäkkého zalamovania medzi písmenami, ktoré sa bežne spájajú s jazykmi ako čínština, japončina a kórejčina (CJK).
Po popise príkladov toho, ako word-breakje možné ich použiť v obsahu CJK, špecifikácia hovorí: „Ak chcete povoliť ďalšie príležitosti na prerušenie iba v prípade pretečenia, pozrite si overflow-wrap“.
Z toho môžeme predpokladať, že word-breaknajlepšie sa použije pri neanglickom obsahu, ktorý si vyžaduje konkrétne pravidlá delenia slov, a ktorý by sa mohol prekladať anglickým obsahom, pričom overflow-wrapby sa malo používať, aby sa zabránilo rozbitiu rozloženia kvôli dlhým reťazcom, bez ohľadu na použitý jazyk .
Historický word-wrapmajetok
overflow-wrapje štandardný názov pre jeho predchodcu, word-wrapvlastnosť. word-wrapbola pôvodne vlastná funkcia iba pre program Internet Explorer, ktorá bola nakoniec podporovaná vo všetkých prehľadávačoch napriek tomu, že nejde o štandard.
word-wrapprijíma rovnaké hodnoty ako overflow-wrapa správa sa rovnako. Podľa špecifikácie musia prehliadače „zaobchádzať word-wraps alternatívnym názvom pre overflow-wrapvlastnosť, akoby išlo o skratku overflow-wrap“. Všetci agenti používateľov sú tiež povinní podporovať word-wrapzo všetkých dôvodov donekonečna.
Oboje overflow-wrapa word-wrapprejde validáciou CSS, pokiaľ je validátor nastavený na testovanie s CSS3 alebo vyšším (momentálne predvolené).
Súvisiace
- prestávka na slovo
- pomlčky
- Biely vesmír
- Spracovanie dlhých slov a adries URL
Viac informácií
- Word-Wrap: Vlastnosť CSS3, ktorá funguje v každom prehľadávači
- Prebalenie na W3C
- Diskusia o pretečení zásobníka
word-breakvs.overflow-wrap
Podpora prehľadávača
Ú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 |
Vyššie uvedená „čiastočná“ podpora je spôsobená podporou starších prehliadačov, word-wrapale nie overflow-wrap. Použitím oboch sa dá zabezpečiť spätná kompatibilita.
Návrhová verzia špecifikácie W3C editora obsahuje novú nazvanú hodnotu, break-spacesktorá sa zaoberá sekvenciami „zachovaných“ znakov bieleho priestoru. Pre túto funkciu nie je známa podpora prehľadávača a nie je zahrnutá v pracovnom koncepte verzie spec.