Is it possible to use hyphens or soft hyphens in CSS so that hyphens are not rendered unnecessarily?

My goal is to keep the original text as much as possible and break out any words unless absolutely critical because they are too long to fit in the container width.

My specific case

I want to render the text "Hi Superman" like this:

If the word "Superman" is too long to fit into the container, I want to hyphenate it somehow, like:

Hi Super- man

However, if the word "Superman" can fit into the container, it must be rendered without hyphens

Hi Superman

If the above situation is possible ("Superman" can be hyphen-free), then adding unnecessary hyphens is not acceptable:

Hi Super- man

I can change the HTML if needed. I can insert hyphens in a meaningful way (as long as there are more than 3 letters between each hyphen. "Superma-n" is never good)

What I tried

I think soft hyphens are the solution. So I used:Hi Superman

But I find that this leads to the unacceptable situation of "unnecessary hyphens" shown above.

Show failed snippet:

body { margin-left: 30px; } div { border: solid 1px black; } .wide { border: solid 1px blue; width: 500px; } .narrow { border: solid 1px red; width: 360px; } h2 { font-family: 'Courier New'; font-weight: 400; font-size: 87px; } code { background-color: #eee; }

 Super­man looks good in really narrow containers where the full word "Superman" would not fit
 
 
Hi Super­man
 
But in this case the word "Superman" would fit unhypenhated on the second row. But the damn CSS decides to add hyphens anyway. Unacceptable in my case! Again, this uses the same code as the previous example Super­man
 
Hi Super­man
 
I even tried adding a wordbreak tag before "Superman", like this Hi  Super­man but it does not help
 ; 
 
 
Hi Super­man

Can I solve the above example using just CSS? (Tried different word-break attributes with no success)

My guess is that due to the nature of CSS, it is impossible to solve this problem using just plain HTML and CSS. I'm assuming CSS just parses text line by line, it can never know if a word "fits better" in the next line of text. If a hyphen is found, it will try to fit the maximum number of characters in the current line of text.

I would like to solve this problem using only HTML and CSS, or not at all.

Best:

• Does not use JavaScript for text parsing.

• I don't want to have to set different CSS properties for each div based on the width of the div and whether I think the text needs a hyphen.

• Don’t want to add wrapping around my text

• Not having auto-hyphens results in ridiculous hyphens like "Superma-n" (but in a pinch I can use auto-hyphens as long as there are 3 characters between each hyphen .For example "Sup-erman" )