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.


Infos zur Browserkompatibilität

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

Weitere Infos:

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

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