Egenskapen overflow-wrap

Egenskapen overflow-wrap tillåter att bokstäver i ett långt ord flyttas till en ny rad om ordet inte får plats i behållarens bredd.

Syntax

selektor {
	overflow-wrap: break-word | normal;
}

Värden

Värde	Beskrivning
`break-word`	Tvingar långa ord att brytas på en ny rad om ordet inte får plats i behållaren. Ordet kommer då att börja på en ny rad.
`normal`	Standardbeteende: om ett långt ord inte får plats i behållarens bredd - kommer det att sticka ut förbi dess kant (det kommer att börja på en ny rad).

Standardvärde: normal.

Exempel . Värdet normal

I detta exempel kommer ett mycket långt ord inte att få plats i behållaren och kommer att sticka ut utanför dess kanter (det kommer att börja på en ny rad):

<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;
}

Exempel . Värdet break-word

Och nu kommer de bokstäver som inte fick plats att flyttas till nästa rad (det långa ordet kommer fortfarande att börja på en ny rad):

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

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

Se även

egenskapen word-break,
som också tillåter att bokstäver i ett långt ord flyttas till en ny rad
egenskapen word-wrap,
som är ett föråldrat namn för egenskapen overflow-wrap
egenskapen hyphens,
som aktiverar ordbrytning med avstavning
taggen wbr,
som implementerar mjuka ordbrytningar med HTML-medel
taggen br,
som kan användas för att tvinga text att brytas till en ny rad