Тег <WBR>
21 февраля 2008, 18:56
Автор: Александр Бурцев [bur]
Мало кому, даже из опытных верстальщиков, известно о существовании тега WBR. Рассмотрим какая польза от него в верстке.
Что делает тег <br> известно всем: занимается переводом строки в том месте, где стоит. А с атрибутом clear="all" вообще способен творить чудеса, игнорируя даже вышестоящие флоаты.
А теперь рассмотрим абстрактную ситуацию. Имеется слово, состоящее из 100 (или 1000) символов без пробелов.
Что произойдет с обычной HTML-страницей? Естественно она разъедется по горизонтали!
Именно в этой и подобных ситуациях на помощь приходит тег <wbr>, расстановка которого позволяет организовать переносы в нужном месте и только в том случае, если слово не влезает в свой контейнер.
Пример в действии:
– Точно работает в IE, Gecko и Safari.
– Валидатор не ругается на этот тег в HTML4.01, в XHTML код будет невалидным.
// Все права на статью HTML::Тег <WBR> принадлежат сайту 2007.fastcoder.ru
Что делает тег <br> известно всем: занимается переводом строки в том месте, где стоит. А с атрибутом clear="all" вообще способен творить чудеса, игнорируя даже вышестоящие флоаты.
А теперь рассмотрим абстрактную ситуацию. Имеется слово, состоящее из 100 (или 1000) символов без пробелов.
Что произойдет с обычной HTML-страницей? Естественно она разъедется по горизонтали!
Именно в этой и подобных ситуациях на помощь приходит тег <wbr>, расстановка которого позволяет организовать переносы в нужном месте и только в том случае, если слово не влезает в свой контейнер.
<div style="width:90px; border:1px solid #666;">
XXXX<wbr>XXXX<wbr>XXXX<wbr>XXXX<wbr>XXXX<wbr>XXXX
</div>
XXXX<wbr>XXXX<wbr>XXXX<wbr>XXXX<wbr>XXXX<wbr>XXXX
</div>
Пример в действии:
XXXX XXXX XXXX XXXX XXXX XXXX
Замечания:
– Описанный тег не работает в браузерах семейства Opera.– Точно работает в IE, Gecko и Safari.
– Валидатор не ругается на этот тег в HTML4.01, в XHTML код будет невалидным.
// Все права на статью HTML::Тег <WBR> принадлежат сайту 2007.fastcoder.ru