Својство overflow-wrap

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

Синтакса

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

Вредност	Опис
`break-word`	Приморава дугачке речи да се пренесу у нови ред, ако та реч не стане у контејнер. При томе реч ће почети у новом реду.
`normal`	Стандардно понашање: ако дугачка реч не стане по ширини у контејнер – она ће једноставно изаћи изван његове границе (при томе ће почети у новом реду).

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

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

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

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

А сада ће се слова која нису стајала, једноставно пренети у следећи ред (при томе ће дугачка реч ипак почињати у новом реду):

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

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

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