Тег <wbr>

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

Тег <wbr> не имеет закрывающего тега и к нему не применяются какие-либо атрибуты.

При переносе текстовой строки ни один браузер не добавляет знак дефиса, поэтому при надобности можно заменить тег <wbr> на знак мягкого переноса ­. Так же стоит отметить, что браузеры Opera до версии 11.7 и Internet Explorer 8 не делают перенос текстовой строки, если используется тег <wbr>. Чтобы избежать этого необходимо для тега <wbr> в стилях CSS указать свойство display и указать значение inline-block (как в примере).

Пример:

            
<!DOCTYPE html>
<html>
  <head>
    <title>Тег WBR</title>
    <meta charset="utf-8">
    <style>
     .slovo { font-size: 100px; }
     wbr { display: inline-block; }
    </style>
  </head>
  <body>
     <p>Самое длинное слово в физике</p>
     <p class="slovo">Рентгено<wbr>электро<wbr>кардио<wbr>графия</p>
  </body>
</html>
			 
            
Смотреть пример