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.