Својството overflow-wrap

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

Синтакса

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

Вредности

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

Стандардна вредност: 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;
}

Пример . Вредност break-word

А сега оние букви кои не се вклопуваа, едноставно ќе се пренесат на следната линија (при тоа долгиот збор сепак ќе започнува од нова линија):

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