You are here: Rants, Rave, & Tips

Rants, Raves & Tips

Oh Silly Hyphen - Prevent Line Break on Hyphen

Date: 4/29/2013 7:27:00 PM

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 <nobr> 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:

<span style="white-space: nowrap;"> pre-plated</span>

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


 Cheers!