Overflow-wrap-ominaisuus

Ominaisuus overflow-wrap mahdollistaa pitkän sanan kirjainten siirtämisen uudelle riville, jos sana ei mahdu säiliön leveyteen.

Syntaksi

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

Arvo	Kuvaus
`break-word`	Pakottaa pitkät sanat siirtymään uudelle riville, jos sana ei mahdu säiliöön. Tällöin sana alkaa uudelta riviltä.
`normal`	Oletuskäyttäytyminen: jos pitkä sana ei mahdu säiliön leveyteen - se yksinkertaisesti ulottuu sen rajojen ulkopuolelle (ja alkaa uudelta riviltä).

Oletusarvo: normal.

Tässä esimerkissä erittäin pitkä sana ei mahdu säiliöön ja ulottuu sen rajojen ulkopuolelle (ja alkaa uudelta riviltä):

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

Nyt ne kirjaimet, jotka eivät mahtuneet, siirretään yksinkertaisesti seuraavalle riville (ja pitkä sana alkaa silti uudelta riviltä):

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

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

ominaisuus word-break,
joka myös mahdollistaa pitkän sanan kirjainten siirtämisen uudelle riville
ominaisuus word-wrap,
joka on overflow-wrap-ominaisuuden vanhentunut nimi
ominaisuus hyphens,
joka ottaa käyttöön tavuviivoihin perustuvan sananjaon
tagi wbr,
joka toteuttaa pehmeät rivinvaihdot HTML-keinoin
tagi br,
jolla voidaan pakottaa teksti siirtymään uudelle riville