Lange Wörter im Seitenlayout führen oft zu Problemen, da HTML selbst über keine automatische Silbentrennung verfügt. Der Redakteur hat für solche Wörter verschiedene Möglichkeiten die Silbentrennung einzufügen.

Drei Möglichkeiten werden hier vorgestellt:

  1. Es gibt HTML-Befehle für verschiedene Umbrüche, die manuell vom Redakteur an der richtigen Stelle im Text eingetragen werden müssen. Dafür funktionieren die Befehle auch dann, wenn der Text in einer anderen Quelle (Textdokument bzw. Seite) eingefügt wird. Das ist eine gute Methode um Headlines/Überschriften zu formatieren. Für den gesamten Content (einen längeren Text) ist diese Methode zu aufwendig.
  2. Es gibt die Möglichkeit die Silbentrennung per CSS zu aktivieren. Für den Fließtext läßt sich diese Methode gut anwenden.
  3. Es gibt JavaScripte die Silbentrennung ermöglichen.

1. Umbruch mit HTML-Befehl:

<wbr> = Word Break (engl. word break, Wort-Umbruch)
Abenteuer<wbr>spielplatz

Funktioniert leider nicht mit allen Browsern.

Die Trennung erfolgt ohne Trennstrich.

 

&shy; = Soft Hyphen (engl. soft hyphen, weiches Trennzeichen)
Abenteur&shy;spielplatz

Die Trennung erfolgt mit Trennstrich.

 

2. Silbentrennung per CSS:

Achtung: Wird die automatische Silbentrennung verwendet, muss für das entsprechende Element oder eines der Elternelemente mittels des Attributs lang="de" die verwendete Sprache angegeben werden. Eine für ein Element festgelegte Worttrennungseinstellung wird an die Kindelemente vererbt.

Die Eigenschaft hyphens ist derzeit (Stand: Januar 2019) noch nicht in allen aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:

<style>
p { 
 hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 -webkit-hyphens: auto;
}
</style>

 

Blocksatz:

text-align: justify;

 

3. Silbentrennung per javacript:

folgt!

 


&nbsp; = Non Breaking Space
Wenn der Umbruch zwischen zwei Wörtern verhindert werden soll, kann ein geschütztes Leerzeichen eingefügt werden.
Abenteur&nbsp;spielplatz


Neueste Beiträge

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern. Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.