Egenskaben word-break

Egenskaben word-break tillader at flytte bogstaver fra et langt ord over på en ny linje, hvis ordet ikke kan være i containeren på grund af bredden.

Syntaks

selektor {
	word-break: break-all | keep-all | normal;
}

Værdier

Værdi	Beskrivelse
`break-all`	Tvinger lange ord til at blive delt og flyttet til en ny linje, hvis ordet ikke kan være i containeren.
`keep-all`	Til orddeling af ideogrammer.
`normal`	Standardadfærd: hvis et langt ord ikke kan være i containeren på grund af bredden - vil det blive ved med at stikke ud over dens grænse (mens det starter på en ny linje).

Standardværdi: normal.

Eksempel . Værdien normal

I dette eksempel vil et meget langt ord ikke kunne være i containeren og vil stikke ud over dens grænser (mens det starter på en ny linje):

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

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

Eksempel . Værdien break-all

Men nu vil de bogstaver, som ikke kunne være, blive flyttet til næste linje:

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

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

Se også

egenskaben overflow-wrap,
som også tillader at flytte bogstaver fra et langt ord over på en ny linje
egenskaben hyphens,
som aktiverer orddeling i stavelser
egenskaben overflow,
som beskærer de dele, der stikker ud over blokkens grænse
tagget wbr,
som implementerer bløde ombrydninger via HTML
tagget br,
som kan bruges til at tvinge tekst over på en ny linje