How to Keep a Phrase From Wrapping on a Webpage or Blog

Even in a fixed-width webpage or blog, you cannot be certain where line breaks will occur on the visitor's computer. There may be phrases that you want to stay on one line at all times.

Notice that neither of the two phrases in green below stay on the same line. (Change your browser window width, if necessary, to see this). Don't worry about what the example below is saying ... we know most of you aren't programmers ... but the example shows some text that needs to stay together:

Programmers should review the line of code @template = hr(webmaster.org.us 222.333.222.00 localhost); and should also be sure to review the line of code @template = hr(webmaster.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. Using the SPAN tag, wrap the phrase like so: <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. Change your browser window width to see that both green phrases stay on the same line at all times:

Programmers should review the line of code @template = hr(webmaster.org.us 222.333.222.00 localhost); and also review the line of code @template = hr(webmaster.org.us 222.333.222.00 localhost);.

The Code for the no-wrap Example:

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

We hope this information has been clearly explained and helps you create a more effective webpage or blog. Cheers!

►  Take a look at some of our other posts, such as A Dozen Sample Math Formulas for Microsoft Excel