A dash or hyphen is a special character in HTML5 and needs to be treated with care. The reason is that it is not just a character but an indicator of a line break which is picked up by the width properties of the div element. So if you have the div element
<div>party games</div>
a browser will give you the width of a single height text element of 11 characters.
But
<div>party-games</div>
returns a width of 6 characters by default and assumes it can be wrapped. If we are trying to adjust the text to get a best fit, this will obviously cause a lot of problems. In the screenshot you can see what can happen.
The HTML page contains a div element with a hyphen
The single div element contains the text “Der 63-jährigeCano, dessenrichtiger” but as far as the width is concerned, the div contents are “Der 63-”. So if we try to adjust the content to fit the space we get a mess with the text wrapped over the next line. Not pretty 
The solution is to break this into 2 divs (with the – end the end of the first value)
and it looks much better!
I think it can be improved still further, but that is for another post…
