Просмотров: 1 015

Тег wbr в HTML5.

Еще одно нововведение HTML5 – это добавление тега wbr. Давайте разберемся, чем этот элемент отличается от уже знакомого нам элемента br, который использовался в HTML 4 версии.

Обратите внимание, что тег br в HTML5 никуда не исчез и выполняет свои функции по-прежнему.

Так в чем же заключается отличие между этими двумя тегами?

Тег wbr предоставляет возможность сделать перенос строки, если будут выполняться необходимые условия, а тег <br> выполняет перевод строки в любом случае.

Что же это за условия?

Если текст вмещается в ширину родительского элемента, то тег wbr никакого действия оказывать не будет, как только ширина родительского элемента становится меньше ширины текстовой строки, будет выполнен перенос.

Это удобно для размещения на страницах длинных слов, которые должны писаться слитно.

Например, посмотрите на следующий код:

<div style="width:15%; background:#0C9; padding:10px;">
<p>тысяча<wbr>девять<wbr>сот<wbr>девяносто<wbr>девяти<wbr>километровый</p>
</div>
<div style="width:15%; margin-top:10px; background:#0C9; padding:10px;">
<p>тысячадевятьсотдевяностодевятикилометровый</p>
</div>

тег wbr

На верхнем блоке не используется тег wbr, на нижнем используется. Как видите, проблема того, что текст выходит за границы родительского блока решена.

Если увеличить ширину родительского блока:

<div style="width:25%; background:#0C9; padding:10px;">
<p>тысяча<wbr>девять<wbr>сот<wbr>девяносто<wbr>девяти<wbr>километровый</p>
</div>

тег wbr

Несмотря на, наличие тега wbr, текст отображается одной строкой.