How do I wrap words at a defined position? [duplicate]

Question

I want to wrap words at a defined position.

In Germany, we have sometimes very long words which are composed out of several nouns. I would like to wrap such long composed words at the boundaries of two words if the word is too long and a word wrap is necessary.

For example, we have the word "Unternehmenskunden" which means corporate (Unternehmens) customer (Kunde). I want that this word would break into "Unternehmens" and "kunde". I tried to wrap the two word parts into there own spans but that did not affect the wrap. The CSS classes word-break and word-wrap doesn't have a value for that.

I tried to wrap a space into its own span and remove it with display: none or shrink it with width: 0;

Is there maybe some kind of hidden character which marks a word break but doesn't

Here is a fiddle which could help illustrate what I try to achieve and what I tried so far: https://jsfiddle.net/nbk9ptay/3/

Answer 1

Thanks to @GrumpyCrouton I found a solution for an arbitrary word wrap.

The solution is to use either a soft hyphen (­) if you want to have a hypen in case of a word wrap How to word wrap text in HTML?:

<div style="width: 120px; border: 1px solid red;">Unternehmens&shy;kunde</div>

<div style="width: 200px; border: 1px solid red;">Unternehmens&shy;kunde</div>

Or to use html entity ​ if you don't want a hypen in case of a word wrap How to word wrap text in HTML?:

<div style="width: 120px; border: 1px solid red">Unternehmens&#8203;kunde</div>

<div style="width: 200px; border: 1px solid red">Unternehmens&#8203;kunde</div>