kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Wortumbrüche/Zeilenumbrüche per CSS erzwingen

In letzter Zeit habe ich mittels CSS3 Media Queries einige Seiten für mobile Endgeräte optimiert. Dabei sind mir ein paar Besonderheiten der "Responsive Websites" aufgefallen die in dieser Form bei "normalen" Websites eher selten auftreten. Mobile Webdesigns werden beispielsweise mit Prozentangaben umgesetzt um die Inhalte auf die verschiedenen Displays und Ausrichtungen zu strecken. Dabei kann es leicht passieren, dass lange Wörter (z.B. ungekürzte Links innerhalb von Kommentaren) aus einem Container-Element herausbrechen und zu unschönen Darstellungsfehlern führen. Auf dem Smartphone wird durch ein solches Element häufig auch der Zoom-Faktor falsch berechnet.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Break Word

Silbentrennungen sind ja bekanntlich in HTML nicht möglich. Aber es existiert eine CSS-Eigenschaft die Wörter in die nächste Zeile umbricht wenn sie ansonsten das umschließende Element verlassen würden. Hierbei wird das Wort dann ohne Trennzeichen umgebrochen.

p {
  word-wrap:break-word;
}

Diese CSS-Eigenschaft ist natürlich nicht nur für mobile Websites sinnvoll. Ich selbst setze sie z.B. ein um die oben angesprochenen superlangen Links in Kommentaren umzubrechen. Ein overflow:hidden wäre in diesem Fall ja auch keine Alternative.

Vorher/Nachher-Effekt der CSS-Eigenschaft am Beispiel der Website von HUK24
Vorher/Nachher-Effekt der CSS-Eigenschaft am Beispiel der Website von HUK24

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

11 Kommentare

  1. Mathias Gamper

    Verfasst am 22. August 2011 um 22:21 Uhr.

    In diesen Zusammenhang vielleicht interessant, dass Silbentrennungen zumindest in den aktuellsten Versionen von Firefox (ab 6) und Safari (ab 5.1) neu möglich sind. Leider momentan noch ohne erweiterte Einstellungen, wie wir das aus Layoutprogrammen kennen. Mehr dazu hier: http://blog.fontdeck.com/post/9037028497/hyphens

  2. Matthias

    Verfasst am 23. August 2011 um 1:46 Uhr.

    Praktische CSS-Eigenschaft, die ich gut gebrauchen kann. Danke!

  3. Matej Mericnjak

    Verfasst am 23. August 2011 um 7:58 Uhr.

    Vielleicht interessant für einen oder anderen, Sil­ben­tren­nung mittels JavaScript:
    http://code.google.com/p/hyphenator/

  4. Jörn Borchert

    Verfasst am 25. April 2012 um 11:21 Uhr.

    Ahhhhhh, vielen Dank.

    Bin gerade fast wahnsinnig geworden, weil ich einen Link nicht zum umbrechen bekam. Brett vorm Kopf, bis ich auf Deine Seite gestoßen bin.

  5. Günter

    Verfasst am 11. November 2012 um 21:37 Uhr.

    siehe auch mal ab und an noch in selfhtml:

    http://de.selfhtml.org/html/text/zeilenumbruch.htm

    ­ (= soft hyphen = bedingter Trennstrich)
    (wbr = word break = Umbruch innerhalb eines Wortes)

    PS : tolle Seite und ein Hort häufiger Inspiration

    • Jonas Hellwig

      Verfasst am 13. November 2012 um 9:01 Uhr.

      Hallo Günter, vielen Dank für den Hinweis. Von Word-Break halte ich – insbesondere im Hinblick auf Responsive Web und unterschiedliche Zeilenlängen aber nicht so viel. Ich halte ehrlich gesagt von dem gesamten wbr-Element nichts, da mir eigentlich kein einziges Beispiel einfällt, wo ein solcher Zeilenumbruch semantisch und/oder optisch Sinn macht. Bei shy sieht es etwas besser aus, aber auch nicht viel. Peter spricht mir da aus der Seele.

    • Silvio Endruhn

      Verfasst am 9. Juni 2015 um 11:58 Uhr.

      Super genau deinen Kommentar habe ich gesucht, den bedingten Trennstrich ;-)

  6. Mathuseo

    Verfasst am 13. August 2015 um 7:55 Uhr.

    Best ever ist aber zum gegenwärtigen Zeitpunkt m.E.n. noch immer das Element ­

    ichbineinriesenlangeswortundgeheübermehererezeilenohneauchnurdaranzudenkenaufzuhören.
    =
    ich­bin­ein­riesen­langes­wort­und­gehe­über­meherere­zeile­nohne­auch­nur­daran­zu­denken­auf­zu­hören.

    p { word-wrap:break-word; }
    Word-wrap ist zwar ziemlich cool, nutzt leider nur bedingt, da der IE mal wieder seine Probleme macht.

    • Jonas Hellwig

      Verfasst am 13. August 2015 um 9:39 Uhr.

      In der Tat – ­ ist praktisch. Setzt aber voraus, dass der Redakteur in der Lage ist Umbrüche zu erzeugen oder dass man Zugriff auf den HTML-Code hat. Mit CSS hat das ja nichts zu tun. Per JavaScript kann man manchmal noch was retten. Z. B. mit dem Hyphenator.

  7. Mark Max Henckel

    Verfasst am 5. Januar 2017 um 23:52 Uhr.

    Sehr gut. Vielen Dank. Klar und einfach und ich konnte es gerade sehr gut gebrauchen!

    • Jonas Hellwig

      Verfasst am 5. Januar 2017 um 23:56 Uhr.

      Hallo Max, danke für deinen Kommentar. Dieser Artikel hier ergänzt das Ganze und hilft dir sicher noch einmal weiter, da du den Umbruch besser steuern kannst.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.