webew
Войти » Регистрация
 
HTML

Тег <WBR>

21 февраля 2008, 15:56
Мало кому, даже из опытных верстальщиков, известно о существовании тега WBR. Рассмотрим какая польза от него в верстке.

Что делает тег <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>

Пример в действии:
XXXXXXXXXXXXXXXXXXXXXXXX

Замечания:

– Описанный тег не работает в браузерах семейства Opera.
– Точно работает в IE, Gecko и Safari.
– Валидатор не ругается на этот тег в HTML4.01, в XHTML код будет невалидным.


// Все права на статью HTML::Тег <WBR> принадлежат сайту 2007.fastcoder.ru
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
NO USERPIC

40a

Есть спецсимволы &shy; или &#173; или с клавиатуры Alt+0173
26.06.2008, 17:38
Ответить

bur

Спасибо!
&shy; и &#173; не только разбивают слова, но у добавляют символ переноса, удобно.
Однако, у меня эти спец-символы не работают в Гекко, только в ИЕ и Опере.
27.06.2008, 08:47
Ответить
NO USERPIC

40a

Можно написать так <wbr>&shy; Тогда все довольны, но FireFox без знака переноса.
29.06.2008, 11:12
Ответить
NO USERPIC

pepelsbey

Если написать WBR { display: inline-block }, то работать будет и в Opera.
30.06.2008, 08:38
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: