Својство word-break

Својство word-break омогућава пренос слова дугачке речи у нови ред, ако та реч не стане у ширину контејнера.

Синтакса

селектор {
	word-break: break-all | keep-all | normal;
}

Вредност	Опис
`break-all`	Присиљава дугачке речи да се пренесу у нови ред, ако та реч не стане у контејнер.
`keep-all`	За пренос хијероглифа.
`normal`	Стандардно понашање: ако дугачка реч не стане по ширини у контејнер - она ће просто изаћи ван његове границе (при томе ће почети са новог реда).

Подразумевана вредност: normal.

У овом примеру веома дугачка реч неће стати у контејнер и изаћи ће ван његових граница (при томе ће почети са новог реда):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	word-break: normal;
	border: 1px solid red;
}

А сада ће се та слова, која нису стајала, једноставно пренети у следећи ред:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	word-break: break-all;
	border: 1px solid red;
}

својство overflow-wrap,
које такође омогућава пренос слова дугачке речи у нови ред
својство hyphens,
које укључује преносе речи по слоговима
својство overflow,
које одсеца делове који излазе ван границе блока
тег wbr,
који имплементира меке преносе помоћу HTML-а
тег br,
чијом се помоћу може присилно натерати да се текст пренесе у нови ред