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.

Veröffentlicht am Dienstag, 10. April 2012

Kommentare

  1. 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.

    Antworten

    2. Allerdings handelt es sich ja um eine Domain. Wenn da plötzlich ein Trennstrich drin ist, den es in der url gar nicht, wäre das doch etwas komisch, oder? Wenn ich das shy-Entity jetzt aus deiner Erklärung richtig verstehe, kann ich es nicht einsetzen, weil der Inhalt ja dynamisch ist, richtig? Das heißt also, es gibt keine andere Lösung als meine da oben?

      Und naja, zum Glück wird das ja auch nur sehr selten vorkommen und ist damit eh nur eine Notlösung, damit die Domain nicht aus dem Kasten herausragt.

      Antworten

      1. Bin trotzdem überrascht dass Marcel sich mit dieser bestenfalls halbgaren Lösung zufrieden gibt. Es gibt beispielsweise ein Plugin namens FitText, dass dafür sorgt, dass ein Wort etc. stets in die vorhandene Breite passt, in dem die Typogröße verändert wird.

        Antworten

  3. Bin da der Meinung wie Jeriko, eine Lösung wie FitText wäre wohl geeigneter… Dennoch danke, das war, wonach ich grade gesucht hatte ;)

    Antworten