Tipps und Tools rund um WordPress, Google und mehr
Die scheue Silbentrennung
Der Grund ist, dass der Browser einfach nicht weiß, wo entsprechend der Grammatikregeln umzubrechen ist. Aber ein weiches Trennzeichen (Soft Hyphen) an der richtigen Stelle in langen Worten platziert macht genau das.
Inhaltsverzeichnis
Worum es geht
Ohne weiches Trennzeichen
Mit weichem Trennzeichen
So können Sie das weiche Trennzeichen zur Silbentrennung einsetzen
Das Problem dabei ist, das Zeichen ist unsichtbar, Sie finden es auch nicht auf Ihrer Tastatur vor.
HTML-Sonderzeichen
Das weiche Trennzeichen gibt es auch als HTML-Sonderzeichen. Es lautet:
­
Oder alternativ:
­
Aber das können Sie in einem WordPress Editor nicht einfach so in Text- oder Überschriftblöcken verwenden. Dieser Code wird nicht interpretiert, sondern in der Seite exakt so ausgegeben:
Inhalts­verzeichnis
bzw.
Inhalts­verzeichnis
WordPress kann gnadenlos sein, das ist also keine Lösung.
Alternativ können Sie Ihre Überschriften natürlich in einem HTML-Block ausgeben, dabei würde das Zeichnen unsichtbar im Hintergrund wirken.
<h2>Inhalts­verzeichnis</h2> <h2>Inhalts­verzeichnis</h2>
Allerdings müssten Sie sich mit HTML-Anweisungen herumschlagen, und diese Zeiten sollten langsam vorbei sein.
Ein unsichtbares Zeichen kopieren
Der Trick ist also, das Zeichen irgendwie in den Zwischenspeicher des Computers zu bekommen, damit Sie es an passender Stelle, in dem Fall zwischen den Wortteilen Inhalts
und verzeichnis einsetzen können.
Sie erhalten dieses unsichtbare Zeichen zum Beispiel hier: https://unicode-explorer.com/c/00AD
Unter “Copy” werden Sie zwar kein Zeichen sehen, aber klicken Sie dennoch auf den Button. Dann suchen Sie das lange Wort in Ihrer Website, und fügen das Zeichen dort ein, wo eine Silbentrennung grammatikalisch korrekt ist.
Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft
Ja, testen Sie einfach sofort, indem Sie dieses lange Wort auf der Seite am Smartphone ansehen, oder das Browserfenster schmal machen.
Viel Spaß.
Umbruch mit CSS
Wer vor der Nutzung von CSS-Anweisungen nicht zurückschreckt, der kann auch diese benutzen.
h1, h2, h3, h4, h5, h6, p, li {
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
In diesem Fall würden automatisch weiche Umbrüche erfolgen für alle Überschriften, Absätze und Texte in Listen.
Wenn Ihr Browser Lust darauf hat.
Möchten Sie über neue Artikel und mehr rasch informiert werden?
Dann empfehlen wir Ihnen die Anmeldung zu unserem Newsletter "Online-Marketing News der E-Werkstatt".