Wortumbrüche mit CSS

Der ein oder andere von euch kennt sicherlich das Problem, dass ihr zu lange Wörter habt, um sie in einem Kasten oder einem Bereich eurer Website anzeigen lassen zu können, weil sie einfach nicht von alleine umbrechen. Hier ein paar Lösungsansätze für dieses Problem.

Generell betrifft dies „nicht umbrechen“ auch Links, die in der Sidebar auftauchen können (zum Beispiel wenn man Tweets einbindet). Manche Browser machen dies von alleine, viele leider nicht und dann kommt es zu unschönen Seiteneffekten.

Die Lösung

Hier nun ein wenig CSS:

[sourcecode language=“css“]
div.test {
width: 150px;
}
.test1 {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

.test2 {
white-space: nowrap;
overflow: hidden;

-ms-text-overflow: ellipsis; /* Required for IE8 */
-o-text-overflow: ellipsis; /* Required for Opera */
text-overflow: ellipsis;
}
[/sourcecode]

Und hier das Ergebnis:

div.test1

div.test2

Normales div