Главная / Верстка / Теги html / wbr тег html

wbr тег html


12.07.2013 20:252030

Описание

Тег wbr в html  нужен помочь браузеру определить наиболее удобную для переноса строки позицию в случае , если контейнер , в котором находится текст , не вмещает его весь в ширину , и переносит по строкам.

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

Особенно если остается какой-нибудь префикс , который смотрелся бы лучше на новой строке , или слово состоит из 10-15 букв и ввиду того что не влазит , переносится полностью , а не мешало бы перенести как в русском языке , несколько букв тут , остальные на новой строке.

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

Не путайте его с тегом <br> , который переносит принудительно , независимо от того , вмещается текст в размер окна родителя или нет.

Пример

<!DOCTYPE html>
<html>	  
<head>
<meta charset="utf-8">
<title>Тег wbr</title>
</head>
  <body>
        
       1)<div style="width:230px; border:1px solid #000">Самая крупная гидроэлектростанция</div><br />
       2)<div style="width:230px; border:1px solid #000">Самая крупная гидроэлектростан<wbr>ция </div>
         
  </body>
</html>


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

Во втором блоке мы использовали возможности тега wbr , благодаря чему слово осталось на своем месте , а недостающие буквы перенеслись.
 


Синтаксис html и наличие закрывающего тега

Синтаксис Закрывающий тег
..<wbr>.. не требуется

Браузеры поддерживающие <wbr>

Element
<wbr> 1.0 12.0 3.0 4.0 11.7


Html , Wbr , Тег , Тег Wbr





«wbr тег html» - Похожие страницы

Нет записей


Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям