Techemistry Blog

Oh Silly Hyphen - Prevent Line Break on Hyphen

4/29/2013 7:27:00 PM -- Ted Krapf

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:


Setting nowrap for white-space will prevent the browser from wrapping text at that particular point.


[return to articles list]