Word-wrap = overflow-wrap

CSS vlastnost word-wrap se nově jmenuje overflow-wrap, jde o synonyma. Zápis overflow-wrap dlouho nefungoval v Exploreru.

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 word-wrap: bread-word se slovo, které by se nevešlo na řádek, ukončí a bez spojovníku pokračuje na dalším řádku.

word-wrap
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

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, takže to 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.

Podpora

Podpora vlastnosti word-wrap a overflow-wrap
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

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ě.

 

Test vlastnosti word-wrap

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.