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