Search

Blog

  Blog
Techemistry Blog

Oh Silly Hyphen - Prevent Line Break on Hyphen

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

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

[return to articles list]