The shy hyphenation

The reason is that the browser simply does not know where to break according to the grammar rules. But a soft hyphen placed in the right place in long words does exactly that.

Table of Contents

• What it's all about
  • Without soft separator
  • With soft separator
• How to use the soft hyphen for hyphenation
  • HTML special characters
  • Copying an invisible sign
• Wrapping with CSS

What it's all about

Without soft separator

With soft separator

How to use the soft hyphen for hyphenation

The problem is that the character is invisible and you won't find it on your keyboard.

HTML special characters

The soft separator is also available as a special HTML character. It reads:

­

Or alternatively:

­

But you cannot simply use this in text or heading blocks in a WordPress editor. This code is not interpreted, but is output on the page in exactly the same way:

Table of contents

resp.

Contents­directory

WordPress can be merciless, so that's not a solution.

Alternatively, you can of course output your headings in an HTML block, in which case the drawing would appear invisible in the background.

<h2>Table of contents</h2>
<h2>Table of contents</h2>

However, you would have to struggle with HTML instructions, and those days should slowly be over.

Copying an invisible sign

So the trick is to somehow get the character into the computer's cache so that you can place it in the right place, in this case between the parts of the word Contents and directory can be used.

You can obtain this invisible sign here, for example: https://unicode-explorer.com/c/00AD

You will not see a character under "Copy", but click on the button anyway. Then search for the long word in your website and insert the character where hyphenation is grammatically correct.

Danube steamship electricity main works construction sub-officer company

Yes, just test immediately by looking at this long word on the page on your smartphone, or narrow the browser window.

Have fun.

Wrapping with CSS

If you are not afraid of using CSS instructions, you can also use them.

h1, h2, h3, h4, h5, h6, p, li {
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

In this case, soft wrapping would automatically occur for all headings, paragraphs and texts in lists.

If your browser feels like it.