So nutzt du: Soft-Hyphen Generator
- Füge deine Überschrift oder deinen Text ein. Im Automatikmodus bekommen Wörter, die länger als das Limit sind, weiche Trennstriche an wahrscheinlichen Silbengrenzen.
- Für volle Kontrolle tippe den Marker (Standard
|) dort, wo ein Wort umbrechen darf, z. B.Versicherungs|leistungen. - Ziehe die Vorschaubreite, um zu sehen, wie der Text auf schmalen Bildschirmen umbricht. Ein Trennstrich erscheint nur dort, wo das Wort tatsächlich getrennt wird.
- Kopiere als Text (unsichtbare Zeichen, ideal für Webflow und CMS-Felder) oder als HTML mit
­-Entities.
Was ist ein weicher Trennstrich?
Ein weicher Trennstrich (Unicode U+00AD, HTML-Entity ­) ist ein unsichtbares Zeichen, das einen möglichen Zeilenumbruch innerhalb eines Wortes markiert. Passt das Wort in die Zeile, wird nichts angezeigt. Passt es nicht, trennt der Browser das Wort an dieser Stelle und zeigt einen Bindestrich. Das ist die sauberste Lösung für lange Komposita – im Deutschen sehr häufig, etwa „Kundenzufriedenheitsanalyse“ –, die über ihren Container hinausragen oder in großen mobilen Überschriften unschön aussehen.
Weicher Trennstrich vs. Zero-Width Space vs. CSS-Hyphens
| Technik | Zeigt einen Bindestrich? | Ideal für |
|---|---|---|
­ weicher Trennstrich | Ja, nur beim Umbruch | Lange Wörter in Überschriften und Fließtext |
| Zero-Width Space (U+200B) | Nein | URLs, E-Mail-Adressen, Dateipfade, Schrägstriche |
CSS hyphens: auto | Ja | Fließtext – braucht aber ein korrektes lang-Attribut und ein Browser-Wörterbuch und bietet keine Kontrolle |
CSS overflow-wrap: anywhere | Nein | Letztes Sicherheitsnetz; kann Wörter an unschönen Stellen brechen |
Weiche Trennstriche in Webflow verwenden
In Webflows Textfeldern kannst du ­ nicht eintippen – es würde wörtlich angezeigt. Kopiere das Ergebnis als Text mit unsichtbaren Zeichen und füge es in das Überschrift-, Rich-Text- oder CMS-Feld ein. Die weichen Trennstriche werden unsichtbar mitgenommen und funktionieren sofort auf der veröffentlichten Seite. Um sie später wieder zu entfernen, füge den Text hier ein und klicke auf „Unsichtbare Zeichen entfernen“.
Über den Automatikmodus
Der Automatikmodus nutzt einfache Silbenregeln (Übergänge von Vokal zu Konsonant), um Trennstellen vorzuschlagen, und lässt auf jeder Seite mindestens drei Buchstaben stehen. Für Überschriften ist das gut, ersetzt aber kein vollständiges Silbentrennungswörterbuch. Prüfe wichtige Wörter in der Vorschau oder setze Trennstellen manuell mit dem Marker für perfekte Ergebnisse.
Auch gesucht als: weicher trennstrich, ­ generator, silbentrennung tool, zero width space, trennstrich einfügen, lange wörter umbrechen, silbentrennung handy.
Passende Tools zu: Soft-Hyphen Generator
- Smart Quotes Fixer — Code aus Slack, Notion, Word oder einem Blog läuft nicht?
- Groß-/Kleinschreibung-Konverter — Füge einen beliebigen Text ein und wandle ihn zwischen 11 Groß-/Kleinschreibungsvarianten um – von „Title Case“ für Überschriften bis hin zu „camelCase“ und „snake_case“ für Code.
- Wortzähler — Füge deinen Text ein oder gib ihn ein, um Wörter und Zeichen in Echtzeit zu zählen – dazu kommen Lese- und Sprechzeit, Schlüsselwortdichte sowie Längenprüfungen für SEO-Titel, Meta-Beschreibungen und Social-Media-Beiträge.
- HTML-Entity-Encoder — Maskiere < > & ", damit Text sicher in HTML angezeigt werden kann, wandle Akzente und Symbole in benannte oder numerische Entities um oder decodiere HTML mit Entities zurück in Klartext.
Häufige Fragen
Wie tippe ich einen weichen Trennstrich ein?
­. In Editoren, die keine Entities akzeptieren (Webflow, Figma, die meisten CMS-Felder), kopierst du das Zeichen einfach von diesem Tool – es ist unsichtbar, aber vorhanden. Unter Windows kannst du außerdem Alt+0173 eingeben.