How to use the 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.
Tools that pair well with the Soft Hyphen Generator
- Smart Quotes to Straight Quotes — Code copied from Slack, Notion, Word or a blog won’t run?
- Case Converter — Paste any text and convert it between 11 letter cases — from Title Case for headlines to camelCase and snake_case for code.
- Word Counter — Paste or type your text to count words and characters live — plus reading and speaking time, keyword density and length checks for SEO titles, meta descriptions and social posts.
- 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.
Frequently asked questions
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.