Tips, Anleitungen, Arbeitsabläufe, Inspiration, News und Trends

Inhalte breiter als Bildschirm? Probier’s mit Silbentrennung

CSS Tricks

Bekommt ihr auch manchmal den Hinweis von der Google Search Console: Probleme mit mobiler Ansicht – Inhalt breiter als Bildschirm? Dann schaut mal, ob es an zu langen Wörtern in den Überschriften liegt. Abhilfe schafft die hyphens-auto-Angabe in CSS. Es werden dann automatisch lange Wörter am Ende der Zeile mit Bindestrich getrennt. So aktiviert ihr die Silbentrennung:

/* hyphens */
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;

Beispiel automatische Silbentrennung mit CSS

css: hyphens: auto

Reaktionsgeschwindigkeitskonstante und Nahrungsmittelunverträglichkeit sind sehr lange Wörter. Andere lange Wörter sind Lebensversicherungsgesellschaft, Steuervergünstigungsabbaugesetz und Bundesausbildungsförderungsgesetz.

css: hyphens: none

Reaktionsgeschwindigkeitskonstante und Nahrungsmittelunverträglichkeit sind sehr lange Wörter. Andere lange Wörter sind Lebensversicherungsgesellschaft, Steuervergünstigungsabbaugesetz und Bundesausbildungsförderungsgesetz.

 

Mögliche Werte

none: Keine Silbentrennung
manual: Manuelle Silbentrennung (hab ich noch nie verwendet)
auto: Automatische Silbentrennung

Ausführliche Infos

https://developer.mozilla.org/de/docs/Web/CSS/hyphens

Infos zur Browserkompatibilität

https://developer.mozilla.org/de/docs/Web/CSS/hyphens#Browser_compatibility

Feedback willkommen

War dieser Beitrag hilfreich?

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (3 Stimme(n), Durchschnitt: 5,00 von 5)
Loading...

Teile diesen Beitrag als erste/r.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Beiträge interessieren dich vielleicht auch

Cyber Security
für Unternehmer

Wie sicher ist deine Website?

Warum ist es wichtig für die Sicherheit der eigenen Website zu sorgen? Es liegt im Interesse der Allgemeinheit, denn eine schlecht gesicherte Website kann gehackt

Mehr erfahren »