Deutsche Wörter können seeehr lang sein – und so gerne auch mal ein Website-Design brechen. Mit einem kleinen Trick aber kannst du steuern, an welchen Stellen ein Wort umbrechen soll.
Vor kurzem durfte ich einem Kunden von mir helfen, für seine bisher englischsprachige Website mittels Webflow Localizations eine deutsche Version zu erstellen. Hier und da hat das Design für die deutsche Sprachversion aber nicht funktioniert – die deutschen Übersetzungen waren zu lang. Ein Hoch auf die deutsche Sprache. 🥲
Jetzt gibt es zwei Möglichkeiten: Entweder wir ändern die Übersetzung – irgendwie nicht so optimal – oder aber wir gucken, dass wir das Problem über eine Silbentrennung lösen.
Option 1: Dem Browser mittels der CSS-Eigenschaft hyphens: auto; mitteilen, dass er Wörter umbrechen soll, wenn der Platz hierfür nicht ausreicht. 100% sauber funktioniert das aber nicht immer – selbst dann nicht, wenn eine Sprache gesetzt ist.
Oder aber Option 2: Einen bedingten Bindestrich nutzen. Der sogenannte Soft Hyphen, der übrigens auch funktioniert, wenn du nicht mit hyphens: auto; arbeitest, ist eine HTML-Entity, die du ganz einfach an die benötigte Stelle(n) einfügen kannst: ­.
Diesen sogenannten Soft Hyphen, auf deutsch „Bedingter Trennstrich“ genannt, kannst du an beliebige Stellen einfügen und dem Browser so mitteilen, dass ein Wort an einer oder mehreren Stellen umbrechen soll, wenn der Platz zu eng wird. So verhinderst du, dass das Wort dein Design bricht und aus dem Viewport rausläuft.
Mit ­ verhält es sich wie mit allen HTML-Entities: Entweder fügst du sie als HTML ein – in einer Headline also beispielsweise so:
<h1>Die besten Schiff­rundfahrten der Stadt!</h1>
Oder aber du kopierst dir den Character in die Zwischenablage und fügst ihn ein. Das empfiehlt sich, wenn du z.B. einen Text in einem WYSIWYG- oder RichText-Editor bearbeitest. Diese interpretieren Entities häufig als normalen Text und geben ihn entsprechend aus.
Das ist das schöne an dem Soft-Hyphens: Auf deine SEO-Maßnahmen hat es keinen Einfluss. Suchmaschinen erkennen es als HTML-Entity und wissen es entsprechend zu interpretieren. Du kannst es also guten Gewissens in deinen Headlines oder Fließtexten verwenden.
Damit du direkt starten kannst, möchte ich dir noch die Möglichkeit geben, den unsichtbaren Character direkt in deine Zwischenablage zu kopieren und in Webflow oder einem anderen Visual Editor deiner Wahl einzufügen.
Oh, und noch ein kurzer Hinweis: Bitte wundere dich nicht, wenn du beim Einfügen des Characters keine Veränderung siehst. Er ist unsichtbar, als Entity aber im Code vorhanden – und wenn er gebraucht wird, ist er da. Wie ein Superheld.
