Тег <wbr> в HTML — місце можливого переносу рядка

Опис та застосування

Тег <wbr> надає можливість вказати браузеру, що при необхідності в цьому місці можна зробити перенесення рядка (наприклад, занадто довге слово або адреса URL).

Відмінність тега <wbr> від <br> полягає в тому, що в місці розташування тега <br> браузер обов'язково переносить вміст на новий рядок, а зустрічаючи в коді елемент <wbr> тільки в разі потреби.

правити

Загальний опис

правити

Порада

Internet Explorer 8 і Opera до версії 11.7 не роблять переноси довжини рядка, поки в стилях для wbr не вказано властивість display із значенням inline-block , як показано в прикладі.

автор: с3с правити

Нотатка

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

автор: с3с правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	4	11.6	12	5.5–7

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<p>У цьому прикладі, Ви можете змінювати значення для властивості font-size для тексту з wbr в межах від 0 до 100 переміщаючи повзунок</p>
<p id="text">Поточне значення : 20</p>
<input type="range" min="0" max="100" step="1" value="20" id="range" onmousemove="f()">   
<p id="meter">дихлор<wbr>дифеніл<wbr>трихлор<wbr>метил<wbr>метан</p>

*{
  text-align:center;
}

#meter{
  font-size:20px;
}

function f() {
  var range = document.getElementById("range").value;
  var element = document.getElementById("meter");
  var text = document.getElementById("text");

  element.style.fontSize = range.toString() + "px";
  text.innerHTML = "Поточне значення:" + range;
}
//# sourceURL=pen.js

<p>Без <code>wbr</code> — рядок вилазить за межі блока:</p>
<p class="box">https://example.com/catalog/accessories/2026/summer-collection-final.html</p>

<p>З <code>wbr</code> — перенос у дозволених місцях, без дефіса:</p>
<p class="box">https://example.com/<wbr>catalog/<wbr>accessories/<wbr>2026/<wbr>summer-collection-final.html</p>

.box {
    width: 240px;
    padding: 8px;
    border: 1px solid #b9c6d8;
    background: #f6f9ff;
    font-family: ui-monospace, monospace;
    font-size: 14px;
}

<p>Без використання wbr</p>
<p class="text">дихлордифенілтрихлорметилметан</p>
<p>З використання wbr</p>
<p class="text">дихлор<wbr>дифеніл<wbr>трихлор<wbr>метил<wbr>метан</p>

.text{
  font-size:60px;
}