| 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> на символ мягкого переноса ­.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 10.10.2018
Редакторы: Влад Мержевич
Тег 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, на нижнем используется. Как видите, проблема того, что текст выходит за границы родительского блока решена.
Если увеличить ширину родительского блока:
<div> <p>тысяча<wbr>девять<wbr>сот<wbr>девяносто<wbr>девяти<wbr>километровый</p> </div>
Несмотря на, наличие тега wbr, текст отображается одной строкой.
seodon.ru | Теги HTML — Тег WBR
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <WBR> применяется внутри длинных слов текста и указывает браузеру, что в этом месте возможен перенос строки, если слово не будет умещаться в ширину элемента.
Для создания переносов в длинных словах также можно использовать
Атрибуты
Личные атрибуты: нет.
Общие атрибуты:
- 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.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Нет | Да | Нет |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | ||
| Версия: | 6.0 и 7.0 | 8.0 | 9.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 символ переноса «-» не добавляется. Если он вам нужен — используйте символ мягкого переноса ­ (точка с запятой в конце обязательна, это не опечатка).
Мягкий перенос ­ указывает браузеру место, где он может сделать перенос слова (в случае необходимости), поставив при этом символ переноса «-«.
Мягкие переносы ­ не будут работать, если свойство hyphens задано в значении none (а переносы wbr будут).
Пример . Текст без переносов
Давайте посомтрим на образец текста, в котором есть длинные слова, которые вылезают за границу блока. Блоку зададим маленькую ширину так, чтобы большое слово в нем не поместилось:
<div>
это суперпупердлинныйпредлинный текст
</div> #elem {
width: 200px;
border: 1px solid black;
}
:
Пример . Тег wbr
<div>
это супер<wbr>пупер<wbr>длинный<wbr>предлинный текст
</div> #elem {
width: 200px;
border: 1px solid black;
}
:
Пример . Символ ­
Давайте попробуем вместо тега wbr поставить символ ­. В местах переноса будут отображаться дефисы:
<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>
(от англ.
В 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'"> Я – первый абзац. <br>Чтобы узнать, почему браузер перенес часть слова на новую строку, посмотри<br>те код. </p> <!--Используем 'hr' для разделения абзацев--> <hr> <p title="'wbr' сработает, если ширины элемента не хватит для строки"> Я – второй абзац. Меня отделили гори<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>.
Рис. 1. Перенос текста в браузере Safari
Браузеры
Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив тег <wbr> на символ мягкого переноса ­.
Internet Explorer 8 и Opera до версии 11.7 не делают переносы длинной строки, пока в стилях для wbr не указано свойство display со значением inline-block, как показано в примере.