Comment utiliser : 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.
Aussi recherché comme : shy, ­, soft hyphen, zero width space, zwsp, hyphenation, word break, long words mobile.
Outils complémentaires : Soft Hyphen Generator
- Smart Quotes to Straight Quotes — Code copied from Slack, Notion, Word or a blog won’t run?
- Convertisseur de casse — Collez n'importe quel texte et convertissez-le selon l'une des 11 conventions de casse disponibles — de la casse « Title Case » pour les titres à « camelCase » et « snake_case » pour le code.
- Compteur de mots — Collez ou saisissez votre texte pour compter en temps réel le nombre de mots et de caractères, ainsi que la durée de lecture et de prononciation, la densité des mots-clés et la longueur des titres, méta-descriptions et publications sur les réseaux sociaux à des fins de référencement.
- 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.
Questions fréquentes
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.