How to make soft hyphenations on the web
Long words often cause problems on the web, especially in headlines where they risk extending beyond the screen. With an invisible soft hyphen, you can control where the word is allowed to break, without anything showing under normal circumstances.
Invisible soft hyphen – what is it?
The soft hyphenation tells the browser where a word is allowed to break, if it doesn't fit on one line.
In the source code, it is written as ­
When published, it is invisible, but if the word needs to break, a regular hyphen (-) will appear exactly where the character is placed.
How do I use it?
Ideally, insert the character directly in the source code, for example: <h1>Person­alization</H1>
When published, it will appear as:
Personalization
If the view is too narrow, the word breaks like this:
Person-
alization
What if I can't access the source code?
If you can't type ­ in the source code, such as in Optimizely's header field, you can paste the invisible character directly into the text instead.
You won't see it, but you can confirm that it exists by moving the cursor with the arrow keys. The character takes up an invisible step between letters.
Ways to insert the invisible soft hyphen right away:
- Copy from somewhere, e.g. the code block in this article
- Windows: Using a numeric keypad, hold Alt and type 0173
- Mac: Enable Unicode Hex Input in System Preferences > Keyboard > Input Sources, and enable seeing it in the menu bar. Switch to it, hold down Option and type 00AD.
Copy the invisible soft hyphen (­) with "COPY CODE"
Things to keep in mind
- Break between syllables/word parts, not in the middle of one
- Use a maximum of two soft hyphens per word
- Do not use on links or buttons
A small detail with a big impact
Soft hyphens improve both readability and layout, especially in headings and long compound words.
Can’t this be automated?
Yes, it can – but the results are rarely good. Words may break in the wrong places, which hurts readability. It may feel a bit manual, but right now this is the only reliable way to control how words break on the web.
A smarter solution will surely come one day – but until then, this is your best option.
Tip! Save this article for later 💡
Then you won’t have to search for the character again — just copy it from the code block.
