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
Jetzt bist Du gefragt
Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.