Yuhůův weblog o webu

ve středu 13. dubna 2005

CSS word-wrap láme dlouhá slova

Objevil jsem zajímavou nestandardní CSS vlastnost word-wrap, která funguje jenom v Exploreru. Způsobuje zalamování dlouhých slov, která se nevejdou do svého boxu, ostatní slova přitom neovlivňuje.

HTML funguje tak, že když text dojde doprava na konec řádku, další slovo pokračuje na dalším řádku. Láme se to po slovech. Když je nějaké slovo moc dlouhé, že se nevejde na řádek, tak slovo přeteče doprava. Obvykle se to řeší:

Moje nové řešení doporučuje zápis word-wrap: break-word;. V Exploreru se dlouhé slovo rozlomí a pokračuje na novém řádku. Příklad zápisu:

<style>
p {_word-wrap: break-word;}
</style>

Podtržídko tam dávám, aby bylo vidět, že to je pro Explorer. Ostatní prohlížeče zápis ignorují (i kdyby tam to podtržítko nebylo), což ale většinou nevadí, protože v nich nemá přeteklý layout rozpadávací tendence, jako je tomu v Exploreru. A jsou ještě další dobré kombinace.

Použití na menu

<style>
div.menu {_word-wrap: break-word; overflow: hidden; width: 120px;}
</style>

obzvlášť se to takhle hodí pro různá menu, která mají zůstat ve svých rozměrech při zvětšování písma (proto overflow: hidden), ale jejich text by měl jít přečíst, i když se tam nevejde. Aspoň v Exploreru. Osobně přemýšlím, jestli nebude lepší začínat úplně všechny styly zápisem

* {_word-wrap: break-word;}

Hlavně by se to tak mohlo hodit na stránkách různých diskusí, kde prostě nevíte, co vám do příspěvku kdo vloží -- dost často třeba dlouhé URL. (V PHP se to sice dá řešit přes funkci wordwrap(), ale programátor na to často zapomene.)

Mrkněte na příklad, jak se word-wrap: break-word chová v porovnání s jinou nestandardní exploreří vlastností word-break. Něco málo o word-wrap se dá najít na msdn.com. Podobnou problematiku už jsem tady v blogu řešil někdy loni v souvislosti s <wbr>, ale to jsem CSS vlastnost word-wrap neznal. V Exploreru je podporována od verze 5.5.

trvalý odkaz

Přidat nebo číst komentáře, počet: číslo

Yuhůův weblog píše Dušan Janovský známý jako Yuhů. Kontakt. Weblog patří pod Jak psát web.