Not Letting Text Wrap to a New Line

Even on a fixed-width blog, you never know for sure where line breaks will occur on the visitor's computer.

What if you have a short sentence or phrase that you want to always remain on the same line?

In other words, you don't want the text to ever wrap or be split between two lines.
Notice that neither of the two phrases in green below stay on the same line:

Developers should customize the line of code @template = hr(apache.org.us 222.333.222.00 localhost); and also customize the line of code @template = hr(apache.org.us 222.333.222.00 localhost);.

What do you do if you have a phrase that you do NOT want to be split on two different lines? Use the CSS white-space property.

The CSS white-space Property

This property has several values, but the value that fixes our problem is no-wrap. Just use the SPAN tag before and after the phrase as follows: <span style="white-space:nowrap">Your Phrase Here</span>. (For CSS users, create a class to use in the span like so: .nobreak {white-space:nowrap;}

Fixing the Problem Using no-wrap

To fix the problem, wrap the two phrases with spans using "no-wrap" as shown above:

Developers should customize the line of code @template = hr(apache.org.us 222.333.222.00 localhost); and also customize the line of code @template = hr(apache.org.us 222.333.222.00 localhost);.

The Code for the no-wrap Example:

Developers should customize the line of code <span style="white-space:nowrap">@template = hr(apache.org.us 222.333.222.00 localhost);</span> and also customize the line of code <span style="white-space:nowrap;">@template = hr(apache.org.us 222.333.222.00 localhost);</span>.

►  Take a look at some of our other interesting posts, such as Displaying AdSense Ads Below the Header

If this post has been helpful, please consider linking to our blog or sharing!