Echtes Insider-Wissen ohne Werbung und Gastbeiträge
CSS Tricks

Inhalt breiter als Bildschirm? Probier’s mit Silbentrennung

Inhaltsangabe

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 (z.B. auf der Seite „Datenschutzerklärung“ ;). 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

Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Beiträge zu ähnlichen Themen

Newsletter abonnieren

Wenn du willst, schicke ich dir gern eine E-Mail, wenn ich einen neuen Beitrag veröffentliche. Es kommt kein Spam. Nur nützliche Infos und Freebies für Menschen mit Websites. Versprochen.

Newsletter Sign-up
Ich nutze keinen externen Anbieter und speichere und nutze deine Daten ausschließlich, wie in meinen Datenschutzhinweisen beschrieben. Du kannst dich jederzeit wieder abmelden.

Willst du meinen Newsletter?

Verpasse keine neuen Posts oder Freebies. Ich versende max. einen Newsletter im Monat. Kein Spam. Versprochen.

Newsletter Sign-up
Ich speichere und nutze deine Daten ausschließlich wie in meinen Datenschutzhinweisen beschrieben. Du kannst dich jederzeit wieder abmelden.