Word-wrap = overflow-wrap
CSS vlastnost word-wrap se nově jmenuje overflow-wrap, jde o synonyma. Zápis overflow-wrap dlouho nefungoval v Exploreru. Doporučuji používat novější overflow-wrap.
Overflow-wrap umožňuje zalomit dlouhé slovo tak, aby nepřelezlo okraje řádku, a tak nerozbilo design stránky. Vhodné je to zejména do různých menu nebo do tabulek. Při použití hodnoty overflow-wrap: break-word se slovo, které by se nevešlo na řádek, ukončí a bez spojovníku pokračuje na dalším řádku.
| hodnoty | zalamování dlouhých slov |
|---|---|
| normal | každé slovo je jen na svém řádku, ať je jakkoli dlouhé |
| break-word | pokud by se dlouhé slovo nevešlo na řádek, rozdělí se přes více řádků |
| break-all | každé slovo u pravého konce řádku, které by se normálně raději přeneslo na další řádek, se zalomí přesně na pravém konci a zbytek se přesune na další řádek |
| anywhere | (nová hodnota 2020) každé slovo se může zalomit kdekoliv. Podobné break-all, ale navíc žádné slovo nebrání zúžení obsahu na minimum (užitečné při použití width: min-content). |
Podobného efektu rozdělení dlouhého slova se dá dosáhnout toho, že doprostřed slova vložím tag <wbr>, který dovolí na daném místě slovo zalomit, je-li potřeba . Ovšem nejde to automaticky, čímž <wbr> ztrácí krásu.
Příbuzná je vlastnost Word-break, která hodnotou break-all umí nastavit, že se libovolné slovo zalomí po libovolném znaku, je-li potřeba.
Očekávám, že word-wrap nemusí dobře fungovat u prvků, kterým je nějakým způsobem přenastaveno overflow. Také nefunguje na buňky tabulek, pravděpodobně protože ty si šířky počítají ze svého obsahu. Řešením je nastavení table-layout: fixed u prvku table.
Pro východoasijské jazyky se lámání slov může řídit také CSS vlatností line-break.
Podpora
| Prohlížeč | Podpora ve verzích |
|---|---|
| Internet Explorer a Edge | word-wrap od 5.5 |
| Internet Explorer a Edge | overflow-wrap nepodporuje |
| Mozilla | všechny verze |
| Chrome (Opera) | všechny verze |
Podle mých zkušeností vlastnost word-wrap nefunguje v tabulkách, které nemají
nastaveno table {table-layout: fixed;}.
Příklady
<p style="word-wrap: break-word; width: 180px; outline: 1px solid gray;">
word-wrap: break-word; Tohle je nějaký delší text s
dlouhatananáááááááááááááááááááááááááááááááááááááááááááááááááánským slovem. Dlouhé slovo se zalomí a ostatní se chovají
normálně.
</p>
Výsledek kódu:
word-wrap: break-word; Tohle je nějaký delší text s dlouhatananáááááááááááááááááááááááááááááááááááááááááááááááánským slovem. Dlouhé slovo se zalomí a ostatní se chovají normálně.
Reklama
