Using soft-hyphens in texts
Within text elements (headings or rich text), we do not automatically hyphenate words. Too often, browsers offer strange word breaks, and designers prefer to maintain full control.
If you want to break text manually, you can of course use a ‘hard return’. However, the issue with that is that this line break also carries over to the mobile version of the page.
To allow for proper word hyphenation, you can use soft hyphens. This allows you to indicate where in a word the browser is allowed to break it, if it doesn’t fit. This way, the break appears exactly where you want it to.
To make these soft hyphens visible, enable the ‘Show hidden characters’ option. When you double-click text, the editor will then show any invisible characters in your text, including the soft hyphens.
How to insert a soft hyphen depends on your operating system. More information can be found here: https://unicode-explorer.com/c/00AD
If you want to break text manually, you can of course use a ‘hard return’. However, the issue with that is that this line break also carries over to the mobile version of the page.
To allow for proper word hyphenation, you can use soft hyphens. This allows you to indicate where in a word the browser is allowed to break it, if it doesn’t fit. This way, the break appears exactly where you want it to.
To make these soft hyphens visible, enable the ‘Show hidden characters’ option. When you double-click text, the editor will then show any invisible characters in your text, including the soft hyphens.
How to insert a soft hyphen depends on your operating system. More information can be found here: https://unicode-explorer.com/c/00AD
Updated on: 24/03/2025