Du bist gerade dabei, deine Webseite zu gestalten und willst sicherstellen, dass dein Text optisch ansprechend und gut lesbar ist. Doch wie kannst du Zeilenumbrüche erzwingen oder verhindern? Wie trennst du lange Wörter an den richtigen Stellen? In diesem Artikel erfährst du alles, was du über Zeilenumbrüche, Trennstriche und Silbentrennung wissen musst.
Das Problem mit Zeilenumbruch & Silbentrennung im HTML & CSS
Früher stand das Layout einer Webseite im Vordergrund, und die Zeilenumbrüche und Silbentrennung wurden vernachlässigt. Die meisten Webseiten orientierten sich am Buchdruck und präsentierten den Text einspaltig. Doch das führte oft zu unerwünschten Zeilenumbrüchen und schlechter Lesbarkeit.
Heute ist die geordnete Silbentrennung endlich Einzug gehalten, dank der CSS3 Eigenschaft “hyphens”. Mit dem richtigen Markup und CSS kannst du die Silbentrennung in deinem Text aktivieren und so für eine bessere Lesbarkeit sorgen.
Beispiel: Zeilenumbruch und Silbentrennung im HTML & CSS
Mithilfe von Zoom kannst du ganz einfach simulieren, wie sich die Silbentrennung in deinem Text verhält. In unserem Beispiel befinden sich zwei identische Texte in separaten div-Boxen. Die Breite der Boxen wurde relativ definiert. Du kannst deutlich sehen, wie lange Worte aus der rechten Box herausragen. Eine Lösung für dieses Problem ist die CSS Eigenschaft “word-wrap: break-word;”. Dadurch bleibt das Wort innerhalb der Box, wird aber trotzdem umgebrochen, falls der Platz nicht ausreicht.
Silbentrennung – CSS
Die CSS3 Eigenschaft “hyphens” ermöglicht endlich eine geordnete Silbentrennung. Damit die Silbentrennung korrekt funktioniert, musst du zwingend die richtige HTML-Language angeben. Es stehen verschiedene Werte zur Auswahl: “manual”, “none”, “auto” und “inherit”.
Zeilenumbruch steuern – HTML
Es gibt zwei Möglichkeiten, den Zeilenumbruch im HTML zu steuern. Mit dem HTML-Tag “<br />” erzwingst du einen Zeilenumbruch an der gewünschten Stelle im Fließtext. Damit der Text in der nächsten Zeile fortgesetzt wird, ohne einen Abstand zu halten, nutzt du dieses Tag.
Wenn du einen bedingten (optionalen) Trennstrich möchtest, kannst du das unsichtbare weiche Trennzeichen “” verwenden. Es zeigt dem Programm, wo ein Zeilenumbruch auftreten kann.
Zeilenumbruch verhindern – HTML
Um einen Zeilenumbruch durch automatische Trennung zu verhindern, benutzt du das geschützte Leerzeichen ” “. Es sorgt dafür, dass bestimmte Begriffe nicht auseinander gerissen werden. Auch für Zahlen und Maßeinheiten ist diese Methode sinnvoll.
Als Alternative kannst du das “breitenlose Leerzeichen” verwenden. Es ist ein Leerzeichen ohne Breite, das nie angezeigt wird. Beachte jedoch, dass es nicht in jeder Schriftart enthalten ist.
Trennung von Wörtern – CSS
Mit der CSS Eigenschaft “word-wrap” kannst du Wörter an den festgelegten Grenzen des umgebenden Elements umbrechen lassen. Es stehen die Werte “normal”, “break-word” und “inherit” zur Verfügung.
Standards – Layout mit CSS / HTML
Ein Web-Designer kann nie genau wissen, wie ein Besucher seine Webseite erlebt. Die Bildschirmgröße, Auflösung, Schriftarten und Zoom-Einstellungen variieren von Benutzer zu Benutzer. Du kannst jedoch alles tun, um sicherzustellen, dass dein Text lesbar bleibt.
Es gibt einige Lösungen, um lange Wörter an den richtigen Stellen umzubrechen. Beachte jedoch, dass die Umsetzung von HTML-Standards nicht immer einfach ist. Manchmal sind praktische Lösungen wichtiger als die Einhaltung der Standards.
Jetzt bist du bestens informiert über Zeilenumbrüche, Trennstriche und Silbentrennung im HTML und CSS. Nutze diese Tipps, um deinen Text optisch ansprechend und gut lesbar zu gestalten.
