No Wrap

There are occasions where you have a piece of text that must go on one line or it just wont make any sense. Some early web browsers introduced the <nobr> tag to surround such text but that was never a part of the standards and modern web browsers do not know how to process that tag. Fear not though because a simple stylesheet command can help us to define our own no wrap tag.

The following text from here through all of this text must not be wrapped right through to here appears all on one line as you can see .

As you can see the above paragraph started a new line after "text" even though a number of further words would have fit on that line. It did so in order to avoid wrapping to a new line in the middle of the section of text that is defined as not able to be wrapped. So how did I achieve this without the <nobr> tag that doesn't really exist?

In the HTML I enclosed the text I didn't want to wrap inside of a span tag like this:

<span class="nobr">from here through all of this text must not be wrapped right through to here</span>

Notice that the code is not much different from using the nobr tag except that this actually works in modern browsers. The reason that it works is because of the way that I have defined the "nobr" class in my stylesheet. What I have defined there is:

.nobr {white-space:nowrap;}

So there you have it, a very simple way to use a simple stylesheet command to create your own no wrap tag.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow