CSS: Unterschied von word-wrap, overflow-wrap oder word-break

Um ein Layout for ungewünschten Umbrüchen vor allem auf mobilen Endgeräten zu schützen, müssen manchmal lange Wörter oder insbesondere Links auf die nächste Zeile umgebrochen werden, sonst zerstören sie eventuell das Layout. In CSS stehen hier mehrere Möglichkeiten zur Verfügung: word-wrap, overflow-wrap oder word-break.

Word-wrap ist veraltet und wird ersetzt durch overflow-wrap. Der Unterschied zwischen den Werten „break-word“ und „break-all“ ist, dass „break-word“ auch asiatische Schriftdarstellung handhabt.

Bei overflow-wrap wird das zu lange Wort in eine neue Zeile verschoben, wenn es in eine einzelne Zeile passt ohne das Container-Element zu sprengen. Der Browser unterbricht das Wort nur, wenn er es nicht in eine neue Zeile ohne Überlauf einfügen kann.

word-break bricht einfach das Wort um, auch wenn es in eine neue Zeile passen würde.

Quellen und weiterführende Links:

• https://blog.logrocket.com/guide-css-word-wrap-overflow-wrap-word-break/
• https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break