portfolio website templates

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;

}


Die grüne Schrift hat folgende CSS und ich habe das Language Tag <p lang="de"> eingetragen und mit dieser CSS die Trennung betrieben:


.trennung {

    text-align: justify;

    hyphens: auto;

    -moz-hyphens: auto;

    -ms-hyphens: auto;

    -o-hyphens: auto;

    -webkit-hyphens: auto;

}


Siehe zur Silbentrennung auch die Seite von Werner-Zenk.de.

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

hyphens

Bindestrich automatisch

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.

Trendy Website Blocks

Kein Inhalt

Host Anywhere

Kein Inhalt