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.