Como usar: 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.
Também pesquisado como: shy, ­, soft hyphen, zero width space, zwsp, hyphenation, word break, long words mobile.
Ferramentas que combinam com: Soft Hyphen Generator
- Smart Quotes to Straight Quotes — Code copied from Slack, Notion, Word or a blog won’t run?
- Conversor de maiúsculas e minúsculas — Cole qualquer texto e converta-o entre 11 estilos de letras — desde “Title Case” para títulos até “camelCase” e “snake_case” para código.
- Contador de palavras — Cole ou digite seu texto para contar palavras e caracteres em tempo real — além do tempo de leitura e de fala, da densidade de palavras-chave e da verificação do comprimento para títulos de SEO, meta descrições e postagens nas redes sociais.
- 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.
Perguntas frequentes
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.