20. April 2021

Schlangen­beschwörer­spezial­flöte: Das Problem mit langen Wörtern

Mit dem HTML Sonderzeichen ­ könnt ihr einen bedingten Trennstrich bei euren Inhalten setzen. Das Sonderzeichen gibt eine Trennstelle innerhalb des Wortes vor. Wenn benötigt, wird das lange Wort an dieser Stelle getrennt. Wenn nicht, dann wird das Wort ganz normal abgebildet, ohne Trennstrich.

Responsive Design heißt, dass die Inhalte auf deiner Webseite auch auf kleinen Bildschirmen gut abgebildet werden. Was heißt das jedoch für dich wenn du deine Inhalte schreibst? In Wahrheit gibt es Wörter, die dann auf kleinen Bildschirmen nicht mehr ideal in das Template passen und dort nicht richtig dargestellt werden. Die Inhalte scheinen dann seitlich aus dem Bildschirm zu driften, was nicht sehr hübsch aussieht.

In den meisten Fällen werden diese Fälle im mobilen Design berücksichtigt und die Schriftgröße für die entsprechende Überschrift wird verkleinert. Aber nicht alles kann berücksichtigt werden. Manche Wörter sind dann doch zu lang.

Hierfür gibt es eine Lösung: Der bedingte Trennstrich

Mit dem HTML Sonderzeichen ­ könnt ihr einen bedingten Trennstrich bei euren Inhalten setzen. Dieser ist ganz leicht im WordPress einzufügen. Einfach in eurem Text ein langes Wort an der gewünschten Stelle mit diesem Sonderzeichen versehen.

Das Sonderzeichen gibt eine Trennstelle innerhalb des Wortes vor. Wenn benötigt, wird das lange Wort an dieser Stelle getrennt. Wenn nicht, dann wird das Wort ganz normal abgebildet, ohne Trennstrich.

Ein Beispiel

Als Beispiel ein Wort, das beim Stille Post spielen gerne verwendet wird: Schlangenbeschwörerspezialflöte. Ich habe dieses in meinem Titel verwendet und das Sonderzeichen entsprechend gesetzt. Damit wird es für jede Größe ideal mit einem Trennstrich versehen.

MEMBERSHIP

scriptbee academy

Wenn du richtig durchstarten willst ist dieser Kurs für dich genau das Richtige. Schritt für Schritt nähern wir uns deiner Webseite.
ohne viel Kopfzerbrechen
inkl. Tutoring
Mehr Erfahren

andere Artikel

graduation-hatuserlaptop-phonerocketcheckmark-circlehighlight