CSS: Umbruch in einem Wort erzwingen
Während des Baus der neuen Sourcepages für QUOTE.fm bin ich auf das Problem gestoßen, dass ich einen Umbruch in einem Wort ohne Bindestrich erzwingen musste. Bisher hatte ich noch nie von einer CSS-Möglichkeit gehört, habe mich aber trotzdem mal umgesehen. Und siehe da: word-wrap: break-word; macht genau das, was ich will. Es erzwingt einen Umbruch.
Die Eigenschaft wird ohne Probleme von allen Browsern bis runter zu IE 6 interpretiert.
In meinem Fall habe ich es auf eine h2 angewandt, die noch einen a-Tag beinhaltet:
<style type="text/css">
.bigintro h2 {
margin-bottom: 10px;
color: #fff;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 47px;
font-weight: 300;
line-height: 58px;
word-wrap: break-word;
}
.bigintro a {
color: #fff;
}
</style>
<section class="bigintro">
<div>
<h2><a href="http://richtigsupersuperlangedomain.de">richtigsupersuperlangedomain.de</a></h2>
[...]
</div>
</section>
Und so sieht das ganze ohne, bzw mit break-word aus:
Natürlich ist das eine außergewöhnlich lange URL und den Fall wird es nicht all zu oft geben. Aber genau das ist eine der Frontend-Herausforderungen, denen man begegnet wenn man einen Service baut über dessen Inhalt man nicht die volle Kontrolle hat. Man muss jede Möglichkeit durchdenken, testen und den Code dementsprechend für alle Fälle sichern.
Wenn man auf den Inhalt keinen Einfluss gehts wohl kaum anders, scheisse, pardon, eine Notlösung ist es aber trotzdem: mangels Trennstrich sehe ich nicht, dass es sich um ein zusammenhängendes Wort handelt, noch versteht der Browser meine Sprache und weiss, wo er am geschicktesten umbrechen soll.
HTML hat für solche Fälle das <shy;-Entity, um in einem Wort anzuzeigen, wo umgebrochen werden soll, wenn es nicht in eine Reihe passt. Dann gibts auch den Trennstrich und einen korrekten Umbruch.