Echtes Insider-Wissen aus 20 Jahren Webdesign-Praxis
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

Schreibe einen Kommentar

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

Benachrichtigung per E-Mail

Willst du keinen meiner Posts verpassen? Dann trage dich hier ein. 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.

Beiträge zu ähnlichen Themen

Benachrichtigung per E-Mail

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.