Hier gibt es Hilfen zur Silbentrennung und zur Steuerung von Zeilenumbrüchen in HTML.
Problematik:
Webseiten werden immer dynamischer und in Zeiten von responsive Webdesign kann man sich nie sicher sein, wie der Text dargestellt wird. Oft schauen lange Wörter aus dem Kasten heraus oder stehen in einer Zeile, obwohl noch Platz für mehr Text wäre. Das alles schaut sehr unschön aus und erschwert auch die Leserlichkeit. Schon mal vorweg, es gibt kein Patentrezept, aber die gröbsten Dinge lassen sich in den Griff bekommen, wenn man folgendes beherzt:
- Einsatz von media-Queries umd je nach Bildschirmbreite Fontgrößen und Abstände zu optimieren
- Silbentrennung in der jeweiligen Sprache freigeben/erlauben
- Arbeiten mit HTML Konstrukten wie <nowrap>, wenn möglich
- Einsetzen von HTML Sonderzeichen
HTML Sonderzeichen:
Es gibt eine Reihe von Sonderzeichen, die auch in Eingabefeldern, die keinen HTML Code zulassen verwendet werden können. Denn oft gibt es bei den mannigfaltigen Erweiterung von concrete5 nur reine Texteingabefelder um zum Beispiel eine Überschrift/Titel auf ein Sliderbild zu setzen. Und hier können die folgenden Sonderzeichen wahre Wunder bewirken:
- das '<kaufsmannsund>nbsp;' : (immer mit Kaufmannsund beginnen!!)
dieses Zeichen ist ein Leerzeichen, das aber die beiden Wörter, das es trennt nicht umbrechen lässt.
Beispiel: Hier ist der Firmenname immer mit dem Gesellschaftstyp verbunden:
<firmenname> GMBH - das '<kaufsmannsund>#8209' :
dieses Zeichen ist ein Bindestrich, der auch keinen Umbruch zulässt.
Beispiel: Know‑How - das '<kaufsmannsund>shy;' :
dieses Zeichen kennzeichnet eine mögliche Stelle zur Silbentrennung und wenn das Wort dann tatsächlich getrennt wird, erschein ein Bindestrich vor dem Zeilenumbruch.
Beispiel A: das hier ist ein Satz mit einem sehr sehr langem Wort whnsinslangentextwortdassmankaumdarstellengeschweigedenntrennenkann.
Beispiel B: das hier ist ein Satz mit einem sehr sehr langem Wort whnsinslangentextwortdassmanjetztaberdarstellengeschweigedenntrennenkann.
Ein Beispiel für eine Website, die diesbezüglich sehr gut gemacht wurde: