Eigenschaft word-break

Die Eigenschaft word-break erlaubt es, Buchstaben eines langen Wortes in eine neue Zeile umzubrechen, wenn das Wort nicht in die Breite des Containers passt.

Syntax

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

Werte

Wert	Beschreibung
`break-all`	Zwingt lange Wörter, in eine neue Zeile umzubrechen, wenn das Wort nicht in den Container passt.
`keep-all`	Für den Umbruch von Zeichen.
`normal`	Standardverhalten: Wenn ein langes Wort nicht in die Breite des Containers passt - wird es einfach über seine Grenze hinausragen (dabei beginnt es in einer neuen Zeile).

Standardwert: normal.

Beispiel . Wert normal

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

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

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

Beispiel . Wert break-all

Und jetzt werden die Buchstaben, die nicht passten, einfach in die nächste Zeile umgebrochen:

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

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

Siehe auch

die Eigenschaft overflow-wrap,
die ebenfalls erlaubt, Buchstaben eines langen Wortes in eine neue Zeile umzubrechen
die Eigenschaft hyphens,
die Silbentrennung aktiviert
die Eigenschaft overflow,
die überstehende Teile am Rand des Blocks abschneidet
das Tag wbr,
das weiche Umbrüche mittels HTML realisiert
das Tag br,
mit dem man Text erzwungenermaßen in eine neue Zeile umbrechen kann