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.
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.
Prohlížeč | Podpora ve verzích | Poznámka |
---|---|---|
Internet Explorer | 5.5 | |
Mozilla | všechny verze | |
Chrome (Opera) | všechny verze |
<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ě.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.