Тэг 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;

Глядзіце таксама

Прыклад . Сімвал