Таг wbr

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

Не изисква затварящ таг.

При пренасяне на дума чрез таг wbr символът за пренос "-" не се добавя. Ако той ви е необходим - използвайте символа за мек пренос  (точка и запетая в края са задължителни, това не е печатна грешка).

Мекият пренос  указва на браузъра място, където той може да направи пренос на дума (в случай на необходимост), като постави при това символа за пренос "-".

Меките преноси  няма да работят, ако свойството hyphens е зададено в стойност none (а преносите wbr ще работят).

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

Нека да разгледаме примерен текст, в който има дълги думи, които излизат извън границата на блока. На блока ще зададем малка ширина, така че голямата дума в него да не се събере:

<div id="elem">
	this is supersupersuperlong text
</div>

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

Пример . Таг wbr

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

<div id="elem">
	this is super<wbr>super<wbr>super<wbr>long text
</div>

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

Пример . Символ 

Нека опитаме вместо таг wbr да поставим символа . На местата на пренос ще се показват дефиси:

<div id="elem">
	this is supersupersuperlong text
</div>

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

Вижте също

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

Таг wbr

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

Пример . Таг wbr

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

Вижте също

Пример . Символ