Eigenschaft overflow-wrap

Die Eigenschaft overflow-wrap ermöglicht es, die Buchstaben eines langen Wortes in eine neue Zeile umzubrechen, wenn dieses Wort nicht in die Breite des Containers passt.

Syntax

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

Werte

Wert	Beschreibung
`break-word`	Bewirkt, dass lange Wörter in eine neue Zeile umgebrochen werden, wenn das Wort nicht in den Container passt. Dabei beginnt das Wort in einer neuen Zeile.
`normal`	Standardverhalten: Wenn ein langes Wort nicht in die Breite des Containers passt, ragt es einfach über dessen Grenze hinaus (beginnt dabei aber in einer neuen Zeile).

Standardwert: normal.

Beispiel . Wert normal

In diesem Beispiel passt ein sehr langes Wort nicht in den Container und ragt über dessen Grenzen hinaus (wobei es in einer neuen Zeile beginnt):

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

Beispiel . Wert break-word

Und jetzt werden die Buchstaben, die nicht Platz fanden, einfach in die nächste Zeile umgebrochen (wobei das lange Wort trotzdem in einer neuen Zeile beginnt):

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

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

Siehe auch

die Eigenschaft word-break,
die ebenfalls ermöglicht, Buchstaben eines langen Wortes in eine neue Zeile umzubrechen
die Eigenschaft word-wrap,
die eine veraltete Bezeichnung für die Eigenschaft overflow-wrap ist
die Eigenschaft hyphens,
die Silbentrennung aktiviert
das Tag wbr,
das weiche Umbrüche mittels HTML realisiert
das Tag br,
mit dem Text erzwungenermaßen in eine neue Zeile umgebrochen werden kann