Тег wbr: Тег | HTML справочник – | HTML | WebReference

| HTML | WebReference

Элемент <wbr> (от англ. word break — перенос слов) указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Синтаксис

Текст<wbr>текст

Закрывающий тег

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>WBR</title>
  <style>
   .word { font-size: 2em; }
   wbr { display: inline-block; }
  </style>
 </head>
 <body>
  <p>Самое длинное слово из химии</p>
  <p>метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>
 </body>
</html>

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

Перенос текста в браузере

Рис. 1. Перенос текста в браузере

Примечание

Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив <wbr> на символ мягкого переноса &shy;.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Тег wbr в HTML5.

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

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

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

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

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

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

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

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

<div>
<p>тысяча<wbr>девять<wbr>сот<wbr>девяносто<wbr>девяти<wbr>километровый</p>
</div>
<div>
<p>тысячадевятьсотдевяностодевятикилометровый</p>
</div>

тег wbr

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

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

<div>
<p>тысяча<wbr>девять<wbr>сот<wbr>девяносто<wbr>девяти<wbr>километровый</p>
</div>

тег wbr

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

seodon.ru | Теги HTML - Тег WBR

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

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

Для создания переносов в длинных словах также можно использовать спецсимвол HTML — «мягкий» дефис (&shy;).

Атрибуты

Личные атрибуты: нет.

Общие атрибуты:

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша
    Tab
    ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: текст (строки).

Модель тега: inline (встроенный, уровня строки).

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

Синтаксис

<nobr>текст<wbr>текст</nobr>

Пример HTML: применение тега WBR

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега WBR</title>
  <style type="text/css">
   p {
    width: 250px; /* ширина параграфа */
    border: 2px #ffcc00 solid; /* стили рамки */
    font-size: 200%; /* размер шрифта */
   }
  </style>
 </head>
 <body>
  <p>Восьми<wbr>десяти<wbr>восьми<wbr>миллиметровое зенитное орудие.</p>
 </body>
</html>

Результат примера

Результат. Применение тега WBR.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:НетДаНетНет

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.09.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаЧастичноДаДаДаЧастичноДа

Internet Explorer 8.0 и Opera хоть и понимают тег <WBR> (например, к нему можно применить стили), но не создают перенос. Выходом в данной ситуации будет применение к тегу свойства display со значением inline-block.

| Справочник HTML



Элемент <wbr> (от англ. "word break" ‒ «разрыв слова») указывает браузеру, где можно сделать перенос строки в тексте, если этого требует ширина родительского элемента (например, слишком длинное слово или адрес

URL).

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

Совет: Для разделения больших слов в тексте лучше подойдёт символ «мягкого переноса» — U+00AD.

Синтаксис

Текст<wbr>текст

Закрывающий тег

Не требуется.

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

Тег <wbr> был добавлен в HTML5.

Пример использования:

Пример HTML:

Попробуй сам
<p>четырёхсот<wbr>пятидесяти<wbr>семи<wbr>миллиметровое орудие</p>

Спецификации

Поддержка браузерами

Элемент
<wbr> 7+ 1+ 11.7+ Да 4+ 1+
Элемент
<wbr> 1.5+ 1+

Учебник HTML

HTML Элементы



Тег wbr - мягкий перенос

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

Не требует закрывающего тега.

При переносе слова через тег wbr символ переноса "-" не добавляется. Если он вам нужен - используйте символ мягкого переноса &shy; (точка с запятой в конце обязательна, это не опечатка).

Мягкий перенос

&shy; указывает браузеру место, где он может сделать перенос слова (в случае необходимости), поставив при этом символ переноса "-".

Мягкие переносы &shy; не будут работать, если свойство hyphens задано в значении none (а переносы wbr будут).

Пример . Текст без переносов

Давайте посомтрим на образец текста, в котором есть длинные слова, которые вылезают за границу блока. Блоку зададим маленькую ширину так, чтобы большое слово в нем не поместилось:

<div> это суперпупердлинныйпредлинный текст </div> #elem { width: 200px; border: 1px solid black; }

:

Пример . Тег wbr

А здесь, давайте добавим тег wbr в местах, где мы рекомендуем браузеру сделать перенос слова в случае необходимости (обратите внимание на то, что браузер сделает переносы не везде, где мы указали):

<div> это супер<wbr>пупер<wbr>длинный<wbr>предлинный текст </div>

#elem { width: 200px; border: 1px solid black; }

:

Пример . Символ &shy;

Давайте попробуем вместо тега wbr поставить символ &shy;. В местах переноса будут отображаться дефисы:

<div> это супер­пупер­длинный­предлинный текст </div> #elem { width: 200px; border: 1px solid black; }

:

Смотрите также

  • тег br,
    который делает перенос на новую строку
  • свойство hyphens,
    которое задает настоящие переносы слов
  • свойства word-break и overflow-wrap,
    которые позволяют перенести буквы длинного слова
  • свойство overflow,
    которое обрезает вылезающие за границу блока части

Описание тегов br, wbr и hr

Иногда при выводе текста на экран возникает необходимость перевода текста на новую строку в строго определенном месте. Для этого в HTML применяется одиночный тег <br> (от англ. breakперенос строки

), который формирует пустой элемент разметки и переводит текст на новую строку именно в том месте, в котором он находится. При этом элемент 'br' сохраняет расстояние между строками и не добавляет дополнительного вертикального отступа, как в случае с блочными элементами (см. пример №1). Браузеры, кстати, считают его строчным элементом.

В отличие от элемента 'br', мягкий перенос строки 'wbr', формирующийся одиночным тегом <wbr> (от англ. word break opportunityудобный случай для переноса слова), осуществляет разрыв строки только тогда, когда этого требует ширина родительского элемента. В противном случае перенос строки не происходит. Таким образом, элемент 'br' указывает браузеру, где делать перенос, а элемент 'wbr' – где допускается делать перенос.

В IE элемент 'wbr' срабатывает только, если в стилях 'CSS', применяемых к тегам <wbr>, указано свойство "display: inline-block".

Для визуального и логического отделения одних блоков текста от других, например, абзацев, можно воспользоваться элементом 'hr'. Он формируется одиночным тегом <hr> (от англ. horizontal ruleгоризонтальная линейка) и рисует обычную горизонтальную линию. Элемент является пустым, но браузерами отображается как блочный элемент. Поэтому содержимое, которое следует после элемента, переносится на новую строку (см. пример №1).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы 'br', 'wbr' и 'hr'</title>
</head>
<body>
	<p title="Часть слова перенесена на новую строку при помощи 'br'">
		Я &ndash; первый абзац. <br>Чтобы узнать, почему браузер перенес часть 
		слова на новую строку, посмотри<br>те код.
	</p>
	
	<!--Используем 'hr' для разделения абзацев-->
	<hr>
	
	<p title="'wbr' сработает, если ширины элемента не хватит для строки">
		Я &ndash; второй абзац. Меня отделили гори<wbr>зонталь<wbr>ной лини<wbr>ей 
		<!-- Для IE в качестве примера используем атрибут style -->
		от пер<wbr>вого аб<wbr>заца. 
	</p>
</body>
</html>

Пример №1. Использование элементов 'br', 'wbr' и 'hr'

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

Тег wbr - Уроки по созданию сайтов на WordPress

Тег <wbr>

Описание

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

Синтаксис

Текст<wbr>текст

Закрывающий тег

Не требуется.

Атрибуты

Нет.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег WBR</title>
  <style>
   .word { font-size: 2em; }
   wbr { display: inline-block; }
  </style>
 </head>
 <body>
  <p>Самое длинное слово из химии</p>
  <p>метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тег WBR</title> <style> .word { font-size: 2em; } wbr { display: inline-block; } </style> </head> <body> <p>Самое длинное слово из химии</p> <p>метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p> </body> </html>

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

Перенос текста в браузере Safari

Рис. 1. Перенос текста в браузере Safari

Браузеры

Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив тег <wbr> на символ мягкого переноса &shy;.

Internet Explorer 8 и Opera до версии 11.7 не делают переносы длинной строки, пока в стилях для wbr не указано свойство display со значением inline-block, как показано в примере.

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *