WordPress, SEO, Security, PageSpeed, CSS, Arbeitsabläufe

CSS Tricks
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

Inhalte breiter als Bildschirm? Probier’s mit Silbentrennung

Themen auf dieser Seite

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

Teile das mit deinen Kollegen

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

Feedback willkommen

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

Schreibe einen Kommentar

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

Diese Beiträge interessieren dich vielleicht auch

Dark Mode CSS
Anleitungen

CSS für Dark Mode

Überall wo Informationen auf Bildschirmen dargestellt werden, erfreut sich der „Dark Mode“ immer größerer Beliebtheit. Statt dunklem Text auf weißem Hintergrund, ist der Hintergrund dunkel

Mehr erfahren »