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

Question

This question already has answers here:
How to word wrap text in HTML?
(20 answers)
Closed 3 years ago.
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­kunde</div>
<div style="width: 200px; border: 1px solid red;">Unternehmens­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​kunde</div>
<div style="width: 200px; border: 1px solid red">Unternehmens​kunde</div>

Answer 2

Use inline-block spans to wrap sub words.
Then you have a delineation you can control. It's up to you how the separation gets styled. Using inline-block, just by the nature of HTML you will get a complete long word when there's enough width, and a split double-line when broken down.
Also, if it helps, here's a post touching on truncation and scaling font-size.
Codepen
.container {
width: 250px;
}
.subword {
display: inline-block;
}
<div style="width: 800px; border: 1px solid black; margin-bottom: 4em;">
<span class="subword">Unternehmens</span><span class="subword">kunde</span>
</div>
<div style="width: 100px; border: 1px solid black;">
<span class="subword">Unternehmens</span><span class="subword">kunde</span>
</div>