Word-wrap

CSS vlastnost word-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 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 všechna slova jsou na jednom řádku, ať jsou jakkoli dlouhá
break-word pokud by se dlouhé slovo nevešlo na řádek, rozdělí se přes více řádků

Někde jsem našel uvedeno, že alternativní název této vlastnosti je overflow-wrap. V Chrome mi funguje, v Internet Exploreru nikoliv. Proto zůstávám u zápisu word-wrap.

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-spacing
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer 5.5  
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.