Here's a cool thing I learned today. I had an issue where a customer's webpage contained a word that required a hyphen to be grammatically correct: pre-plated. The word pre-plated appeared at the end of a line in a set width column. Internet Explorer would render the word on two lines instead of one. This would also happen when zoom levels other than 100% were set in other browsers and/or when the responsive design would kick in.
In other words, the sentence formatting should of looked like this:
This is a cool sentence about things
pre-plated and some things that are not.
When the problem occurred, the hyphenated word would get broken apart onto separate lines like this:
This is a cool sentence about things pre-
plated things and some things that are not.
I had read that there is a tag, but it's not officially part of the HTML spec. So what's a guy to do?
CSS to the rescue!
If you simply code the html as, CSS will handle the dirty work:
pre-plated
Setting nowrap for white-space will prevent the browser from wrapping text at that particular point.
Cheers!