Yuhůův weblog o webu

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ší:

• buď přes overflow: hidden;, přesahující text se prostě násilím uřízne. Čtenář ale uříznutý text nevidí,
• nebo se to nechá přetékat -- v tu chvíli se ale v Exploreru může rozpadnout design, obzvlášť, pokud se něco ve stejném bloku pozicuje nebo rámečkuje.

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