web builder

Wortumbruch
word-wrap

Beispiel mit unterschiedlichen Wortumbrüchen mittels CSS.

Manchmal kann es sinnvoll sein, wenn man nur wenig Platz hat aber sehr lange Worte, diese mittels CSS zu trennen. Erfolgreich im August 2017 getestet mit den Browsern: Edge, IE11, Firefox 55. Im Chrome funktioniert das z.Zt. nur in Englisch und nicht auf Deutsch.


Unten mal ein Block mit 6 Einteilungen. Bei der Schriftgröße passt das Wort "Tannenzapfenstreich" nicht in die Breite einer Sektion und muss umbrochen werden.


Die blaue Schrift hat folgende CSS mit der class="umbruch", die ich mit dem "Code Editor" von Mobirise eingetragen habe. Die CSS-Eigenschaft hyphens erzeugt einen logischen Bindestrich aufgrund des Sprach-Tags lang="de", das die Browser erkennen. Die CSS-Eigenschaft word-wrap vollzieht den Umbruch. Da man dieses Sprach-Tag in Mobirise nicht an das <html> Tag schreiben kann, habe ich es hier an das <p> Tag meines Absatzes geschrieben:


<p lang="de">


CSS-Class:


.umbruch {

    hyphens: Auto;

    -ms-hyphens: Auto;

    -webkit-hyphens: None;

    word-wrap: Break-Word;

}


Die rote Schrift hat keine CSS und schreibt das lange Wort über die Sektion hinweg.


Die schwarze Schrift hat folgende CSS und trennt das Wort einfach am Ende des zur Verfügung stehenden Bereichs mit der CSS-Eigenschaft word-break. Dieser Schrift habe ich die class="buchstabentrennung" gegeben:


CSS-Class:


.buchstabentrennung {

    word-break: break-all;

}

Beispiele mit langen Worten

Hier ein Beispiel mit unterschiedlichen Wortumbrüchen bei langen Worten

hyphens

word-wrap

Tannenzapfenstreich

Default

Ohne CSS



Tannenzapfenstreich

word-break

break-all





Tannenzapfenstreich

Unlimited Sites

Kein Inhalt

Trendy Website Blocks

Kein Inhalt

Host Anywhere

Kein Inhalt