Heute geht es mal in die Abteilung CSS (Cascadind Style Sheets). Wie schon öfter angesprochen, kann ich WordPress an vielen Stellen manipulieren und an meine eigenen Bedürfnissen anpassen.
Einer dieser Orte ist die Custom CSS. Eine Datei, in der ich bestehende CSS-Befehle überschreiben oder auch neue Anweisungen hinterlegen kann.
Ein öfter mal auftretendes Problem sind zu lange Wörter, die unter Umständen in der Desctop-Variante noch in das Textfeld passen, allerdings bei Tablet und Mobil aus dem Sichtfeld laufen würden. Dies ist nicht nur unschön anzusehen sondern spricht auch gegen das Responsive Design.
Für derartige Fälle hält CSS einige Befehle zur Silbentrennung bereit. Grundsätzlich gibt es zwei Möglichkeiten, dass Problem anzugehen.
Wir definieren eine globale CSS Silbentrennung auf Basis der Seitensprache
Für die Globale Variante definierst Du mit der CSS-Eigenschaft -hyphens- ein umfassende Silbentrennung nach den Trennregeln Deiner eingestellten Seitensprache in WordPress. In der Custom-CSS trägst Du dazu folgenden Code ein:
body {
-ms-hyphens: auto; /* Edge, Internetexplorer */
-webkit-hyphens: auto; /* Safari */
hyphens: auto;
}Da die Eigenschaft -hyphens- derzeit (Stand: Januar 2019) noch nicht in alle aktuellen Browser implementiert ist, sollte man Sie als proprietäre Eigenschaften verwenden.
Weitere Informationen unter caniuse.com
Wir nehmen uns die „Problemwörter“ einzeln vor
Bei der manuellen Variante bietet Dir CSS mehrere Möglichkeiten. Die jeweilige Anweisung platzierst Du direkt dort, wo eine Trennung (oder auch keine) im Wort erfolgen soll.
Zum einen gibt es den „Soft Hyphen – ­(;)*“. Hierbei erfolgt eine Trennung mit Trennstrich.
Beim „Word Break – <wbr>“ dagegen erfolgt die Trennung ohne Trennstrich.
In manchen Fällen möchte man auch eine Trennung vermeiden, z. Bsp. bei Eigennahmen. Dafür benötigst Du das geschützte Leerzeichen, den sogenannten „Non Breaking Space –  (;)* “.
Nachstehen habe ich einmal die drei o.g. Varianten in wirklich heftige Wortungetüme eingebaut. Schau Dir an was passiert, wenn Du das Browserfenster verkleinerst!
*Beim schreiben im Wort die Klammern weg lassen. Soll an dieser Stelle nur für die Sichtbarkeit sorgen.
Grundstücksverkehrszuständigkeitsübertragungsverordnung
In diesem Beispiel wird das Wort an zwei Stellen durch einen „Word Break“ sauber getrennt.
Tennisballaufschlagsgeschwindigkeitsmessmaschinen
Die „Tennisballmaschine“ hab ich einmal mit dem „Soft Hyphen“ getrennt.
Eierschalensollbruchstellenverursacher
Die „Eierschale“ habe ich in seiner Urform belassen. Spätestens bei der mobilen Ansicht wird das Wort aus dem Sichtfeld laufen.
Restmülltütenverschlusssicherundsdraht 2.0
Der „Tütendraht 2.0“ bricht nach den üblichen Trennregel um, allerdings wird das „2.0“ hinter dem Wort gehalten und nicht seperat umbrochen.
Fazit
Bei aller technischen Raffinesse heutzutage aber der Teufel steckt immer noch im Detail! Es sind immer die kleinen und unscheinbaren Sachen, die den Unterschied machen. In diesem Sinne…
