Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 12 Kommentare

  1. PJ
    schrieb am 12.04.2019 um 09:04 Uhr:

    Cool..
    Werde es nachher gleich mal ausprobieren.

    Antworten
  2. Mark Max Henckel
    schrieb am 05.01.2017 um 23:52 Uhr:

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

    Antworten
    • Jonas Hellwig
      schrieb am 05.01.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.

      Antworten
  3. Mathuseo
    schrieb am 13.08.2015 um 07: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.

    Antworten
    • Jonas Hellwig
      schrieb am 13.08.2015 um 09: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.

      Antworten
  4. Günter
    schrieb am 11.11.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

    Antworten
    • Jonas Hellwig
      schrieb am 13.11.2012 um 09: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.

      Antworten
    • Silvio Endruhn
      schrieb am 09.06.2015 um 11:58 Uhr:

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

      Antworten
  5. Jörn Borchert
    schrieb am 25.04.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.

    Antworten
  6. Matej Mericnjak
    schrieb am 23.08.2011 um 07:58 Uhr:

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

    Antworten
  7. Matthias
    schrieb am 23.08.2011 um 01:46 Uhr:

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

    Antworten
  8. Mathias Gamper
    schrieb am 22.08.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

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →