So nutzt du: Soft Hyphen Generator
- Paste your headline or text. In automatic mode, words longer than the limit get soft hyphens at likely syllable breaks.
- For full control, type the marker (default
|) where a word may break, e.g.Versicherungs|leistungen. - Drag the preview width to see how the text wraps on narrow screens — a hyphen only appears where the word actually breaks.
- Copy as text (invisible characters, perfect for Webflow and CMS fields) or as HTML with
­entities.
What is a soft hyphen?
A soft hyphen (Unicode U+00AD, HTML entity ­) is an invisible character that marks a possible line break inside a word. If the word fits on the line, nothing is shown. If it doesn’t, the browser breaks the word at that point and displays a hyphen. It is the cleanest fix for long compound words — common in German (“Kundenzufriedenheitsanalyse”) — that overflow their container or look awkward in large mobile headlines.
Soft hyphen vs zero-width space vs CSS hyphens
| Technique | Shows a hyphen? | Best for |
|---|---|---|
­ soft hyphen | Yes, only when broken | Long words in headings and body text |
| Zero-width space (U+200B) | No | URLs, email addresses, file paths, slashes |
CSS hyphens: auto | Yes | Body copy — but needs a correct lang attribute and browser dictionary, gives no control |
CSS overflow-wrap: anywhere | No | Last-resort safety net; can break words in ugly places |
Using soft hyphens in Webflow
Webflow’s text fields don’t let you type ­ — it would appear literally. Copy the output as text with invisible characters and paste it into the heading, rich text or CMS field: the soft hyphens travel along invisibly and work immediately on the published site. To remove them later, paste the text back here and click “Remove invisible characters”.
About automatic mode
The automatic mode uses simple syllable rules (vowel–consonant transitions) to suggest break points, keeping at least three letters on each side. It is good for headlines but not a full dictionary hyphenator — check important words in the preview, or set break points manually with the marker for perfect results.
Auch gesucht als: shy, ­, soft hyphen, zero width space, zwsp, hyphenation, word break, long words mobile.
Passende Tools zu: Soft Hyphen Generator
- Smart Quotes to Straight Quotes — Code copied from Slack, Notion, Word or a blog won’t run?
- 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 — Escape < > & " so text is safe to show in HTML, convert accents and symbols to named or numeric entities, or decode entity-filled HTML back to plain text.
Häufige Fragen
How do I type a soft hyphen?
­. In editors that don’t accept entities (Webflow, Figma, most CMS fields), copy the character from this tool — it’s invisible but present. On Windows you can also type Alt+0173.