Zeilenumbruch in einem Span verhindern oder erzwingen

Zeilenumbruch in einem span erzwingen, verhindern

Gefragt wurde ich dieser Tage wie man es schafft, dass ein Text in einem span umbricht. Das span Element war korrekt in einem div eingebettet. Und dieses hatte eine feste Breite in em.

Dies ging solange gut bis einmal ein sehr langes Wort in dieses html Konstrukt gelang ;). Und dann brach das lange Wort aus der festen Breite des Div aus.

Hier bringe ich eine simple Lösung wie einen Zeilenumbruch in jedem inline Element, also auch dem Span erzwingen kann.

Span in einem Blockelement mit fester //flexibler Breite und langer Text

Der problematische Teil auf der Website des Fragenden sah ungefähr so aus. Man sah den Rahmen des umgebenden div und das lange Wort ragte weit über diesen hinaus.

Es sieht einfach nicht gut, wenn Text über eine definierte Box hinausläuft. In dem Fall ein div mit der Breite von 18em. EssiehteinfachnichtgutauswennTextüberdieBoxhinausläuftdaskanndasLayoutschonmalgehörigbrechen

Zeilenumbruch in einem span erzwingen

Gewünscht war aber untenstehende Ansicht. Auch das lange Wort sollte sich an die Breite des ihn umgebenden html Elements anpassen.

Bessersiehtesauswennmanwordbreakbreakallundwordwrapbreakwordverwendet -oder was meinst du?
Erreicht habe ich dies mit der CSS3: word-warp und word-break.

IE8 benötigt ein hasLayout, damit dies funktioniert, daher supporte ich diesbezüglich diesen Browser nicht!

<div style="width:10em;">
<span style="word-wrap: break-word; word-break: break-all;"> 

ganzlangesWort

</span></div>

Das inline CSS habe ich nur hier für die Beispiele verwendet, sonst vermeide ich es inline CSS zu verwenden.

word-wrap Eigenschaften und Browsersupport

Syntax:word-wrap: normal|break-word;Außerdem ist es vererbend.
Word-wrap mit dem Wert break-word bricht auch innerhalb eines Wortes um, wenn der Platz zu eng wird.

Ob dies dann immer einen sinnvollen Textumbruch ergibt ist eine andere Frage. Zumindest bricht das Layout nicht und verhindert daher, dass der zulange Text oder das zulange Wort in einen anderen Text hineinfließt und alles unlesbar wird.

Daher kann dies für eine Breadcrumb sehr wohl hilfreich sein. Wenngleich ich es nur im Notfall dafür verwenden tät.

andere Länder andere Sprachen und andere CSS3 Lösungen

In den sogenannten CJK Sprachen würde word-wrap nicht ausreichen. Aber auch in Chinesisch, Japanisch und Koreanisch mag man hie und da einen Zeilenumbruch in einem span erzwignen und dafür ist word-break: break-all oder word-break:hyphenate. Auch word-break ist vererbend..

Browsersupport von word-break

Bis auf den Opera verstehen dies alle modernen Versionen der gängigsten Browser.

Ich verwende daher meist beide, weil ich nie weiß, ob sich nicht jemand einen Artikel in eine dieser Sprachen automatisiert übersetzen läßt.

responsive Layout mitbedenken

Word-wrap und word-break eignen sich nicht nur für den erzwungenen Zeilenumbruch in einem inline Element wie dem span, sondern können auch bei der Erstellung eines responsive Layouts für „pre“ und „code“ sehr hilfreich sein.

weitere INFO zu div und span: Unterschied zwischen einem Div und einem Span

mts

Ebenfalls informativ und lesenswert

2 Kommentare zu “Zeilenumbruch in einem Span verhindern oder erzwingen

  1. daniel

    hi moni,
    gute gedanken, danke hierfür 🙂
    darf ich dir dazu eine frage stellen? ich habe häufiger das problem, dass nach einem bild im textbereich, der text direkt daneben beginnt, obwohl nur z.b. 30px platz ist, also klassisch umfliessend, aber eben unschön. gibt es hierzu eine elegante, einfache lösung, sodass text nach einem einzelnen foto (abweichend zu einer galerie) erst in der zeile darunter beginnt?
    viele grüße aus bruchsal
    daniel

  2. mts

    grüß Dich Daniel, die einfachste Lösung ist es solche Bilder „zentriert“ anzuzeigen, wenn es geht, dann passiert dies nicht.
    Eine elegantere Lösung kann ich nur vorschlagen, wenn ich „sehe“ wo das passiert, also einen Link zu so einem Beitrag wo neben dem Bild kaum Platz ist, dann kann ich da eher helfen. Per EMail ist sowas am besten geklärt.