Свойство 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,
с помощта на който може принудително да се накара текстът да се пренесе на нов ред