overflow-wrapVlastnost CSS vám umožňuje určit, že prohlížeč může zlomit řádek textu uvnitř cílového prvku na více řádků v jinak nerozbitné místě. To pomáhá vyhnout se neobvykle dlouhému řetězci textu, který způsobí problémy s rozložením kvůli přetečení.
.example ( overflow-wrap: break-word; )Hodnoty
normal: výchozí. Prohlížeč rozdělí řádky podle běžných pravidel pro dělení řádků. Slova nebo nepřerušené řetězce se nezlomí, i když přeteknou kontejnerem.break-word: slova nebo řetězce znaků, které jsou příliš velké na to, aby se vešly do jejich kontejneru, se na libovolném místě zlomí, aby vynutily zalomení řádku. Znak pomlčky nebude vložen, i když jehyphensvlastnost použita.inherit: cílený prvek musí zdědit hodnotuoverflow-wrapvlastnosti definované na jeho bezprostředním rodiči.
Ukázka níže má přepínací tlačítko, které umožňuje přepínat mezi normala break-word.
Podívejte se na ukázku přetékání / zalamování pera od Louise Lazarise (@impressivewebs) na CodePen.
K prokázání problému, který se overflow-wrappokouší vyřešit, používá ukázka neobvykle dlouhé slovo uvnitř relativně malého kontejneru. Když break-wordzapnete, slovo se rozbije, aby se přizpůsobilo malému množství dostupného prostoru, jako by slovo obsahovalo více slov.
Řetězec nerozbitných mezerových znaků ( ) by byl zpracován stejným způsobem a také by se zlomil na příslušném místě.
overflow-wrapje užitečné, když je aplikováno na prvky, které obsahují nemoderovaný obsah vytvářený uživateli (například sekce komentářů). To může zabránit tomu, aby dlouhé adresy URL a jiné nepřerušené textové řetězce (např. Vandalismus) narušily rozvržení webové stránky.
Podobnosti s word-breakmajetkem
overflow-wrapa word-breakchovat se velmi podobně a lze je použít k řešení podobných problémů. Základní shrnutí rozdílu, jak je vysvětleno ve specifikaci CSS, je:
overflow-wrapse obecně používá, aby se předešlo problémům s dlouhými řetězci, které by způsobily rozbité rozložení kvůli textu proudícímu mimo kontejner.word-breakurčuje možnosti měkkého zalamování mezi písmeny běžně spojenými s jazyky jako čínština, japonština a korejština (CJK).
Po popisu příkladů toho, jak word-breaklze použít v obsahu CJK, říká specifikace: „Chcete-li povolit další možnosti přerušení pouze v případě přetečení, viz overflow-wrap“.
Z toho můžeme předpokládat, že word-breakse nejlépe použije u neanglického obsahu, který vyžaduje specifická pravidla overflow-wrappro dělení slov, a který by se mohl prolínat s anglickým obsahem, zatímco by se mělo používat, aby se zabránilo rozbitému rozvržení kvůli dlouhým řetězcům, bez ohledu na použitý jazyk .
Historický word-wrapmajetek
overflow-wrapje standardní název pro jeho předchůdce, word-wrapvlastnost. word-wrapbyla původně proprietární funkce pouze pro Internet Explorer, která byla nakonec podporována ve všech prohlížečích, přestože nebyla standardem.
word-wrappřijímá stejné hodnoty jako overflow-wrapa chová se stejným způsobem. Podle specifikace prohlížeče musí „zacházet word-wraps alternativním názvem overflow-wrapvlastnosti, jako by šlo o zkratku overflow-wrap“. Všichni uživatelé agentů jsou také word-wrapze starších důvodů povinni podporovat neomezeně dlouho.
Oba overflow-wrapa word-wrapprojdou validací CSS, pokud je validátor nastaven na testování proti CSS3 nebo vyššímu (aktuálně výchozí).
Příbuzný
- přestávka na slovo
- pomlčky
- prázdné znaky
- Zpracování dlouhých slov a URL
Více informací
- Word-Wrap: Vlastnost CSS3, která funguje v každém prohlížeči
- Přeplnění na W3C
- Diskuse o přetečení zásobníku na
word-breakvs.overflow-wrap
Podpora prohlížeče
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 |
Výše uvedená „částečná“ podpora je způsobena podporou starších prohlížečů, word-wrapale nikoli overflow-wrap. Použití obou může zajistit zpětnou kompatibilitu.
Návrhářská verze specifikace W3C obsahuje novou hodnotu s názvem, break-spaceskterá se zabývá sekvencemi „zachovaných“ znaků mezer. Pro tuto funkci není známa žádná podpora prohlížeče a není zahrnuta v pracovní verzi konceptu specifikace.