In HTML gibt es einige Entitäten und CSS-Eigenschaften, die beeinflussen können, wie der Text in einem Element als Line Breaks umbricht oder umgebrochen wird:
- ­ (Weicher Bindestrich): Wie du vielleicht schon weißt, ist dies ein weicher Trennstrich, der dem Browser einen Hinweis darauf gibt, wo er ein Wort gegebenenfalls mit Line Breaks umbrechen muss. Er ist unsichtbar, es sei denn, das Wort wird am Ende einer Zeile umbrochen.
- ​ (Zero Width Space): Dies ist ein unsichtbares Leerzeichen, das es dem Text ermöglicht, an dieser Stelle umzubrechen, ohne dass ein Zeichen angezeigt wird. Es ist nützlich, um lange Textabschnitte wie URLs oder Bezeichner, die keine natürlichen Umbruchpunkte haben, zu trennen.
<p>http://www.example.com/very​long​URL​path</p> - CSS-Eigenschaft word-break: Mit dieser CSS-Eigenschaft kannst du festlegen, wie Wörter als Line Breaks umbrochen werden sollen, wenn sie das Ende einer Zeile erreichen.
.container { word-break: break-all; /* To break at any character */ } - CSS-Eigenschaft overflow-wrap: Diese Eigenschaft legt fest, ob der Browser Zeilenumbrüche in eine ansonsten nicht umbrechbare Zeichenkette einfügen soll, um zu verhindern, dass der Text seinen Container überläuft.
.container { overflow-wrap: break-word; /* To break at appropriate places */ } - CSS-Eigenschaft white-space: Diese Eigenschaft legt fest, wie der Leerraum innerhalb eines Elements behandelt wird.
.container { white-space: pre-wrap; /* Preserves white space and wraps text */ } - <wbr>(Word Break Opportunity): Dieser HTML-Tag schlägt eine Stelle im Text vor, an der der Browser optional einen Zeilenumbruch vornehmen kann. Es ist ähnlich wie , fügt aber keinen Bindestrich ein.
<p>http://www.example.com/very<wbr>long<wbr>URL<wbr>path</p>
Jede dieser Methoden hat ihren eigenen Anwendungsfall, je nachdem, ob du potenzielle Zeilenumbruchspunkte vorschlagen, Line Breaks erzwingen oder den Umbruch von Text innerhalb seines Containers steuern willst.
