CSS Nowrap: The White Space Property

cssnowrapIn the same way that people from another time maintain old habits and outdated practices, so do programmers working in CSS occasionally want to preserve the very codeyness of code.  In CSS, nowrap is one of several possible values for the White Space property.  When you want to control the behavior of default line breaks, tabs and other inherent kinks, you whip out the old White Space property and reminisce.  Nowrap is our feature presentation, which suppresses “normal” text wrapping, but the other values of White Space are closely related, easy to use and no doubt they will find a special place in that old fashioned heart o’ yourn.  Eyesight not what it used to be?  Learn more about CSS layout and design in this class for all skill levels.

The White Space property allows you to fine-tune the wrapping of an element.  The default value of White Space is normal, meaning that an element, such as the text of a paragraph, will wrap predictably in standard justification, like the paragraphs in this blog post.  The text knows that when it encounters another element (the picture above) it should wrap down to the next line, thereby avoiding an overlay.  Let’s pick out some example text for our paragraph.  This would be our HTML:

<p>
What's the world coming to?  First typewriters, 
then computers, now this?
</p>

We’ll use a tab-size declaration to define our tabs:

p {
  border: 1px solid #000000;
  padding: 4px;
  width: 250px;
}

Pretty standard stuff.  Now would be an appropriate time to introduce syntax.  For the first example, I’m going to show the default settings (normal) so that we can establish a point of reference.  By definition, a normal value collapses sequences of whitespace into a single whitespace, and text wraps instinctually:

p
{
white-space: normal;
}

It’s almost too easy.  But the result is exactly what we’re used to, a perfectly wrapped, bordered text:

Screen Shot 2013-12-20 at 8.19.24 PM

So far, so good.  You probably noticed that the line breaks preceding and following our HTML text (that is, the text was not written: <p> Back in the day… <p/>) were removed, as well, so that the border renders appropriately.  It’s picture perfect.  So bring out your Warhol costume and learn the art of black and white photography.

Nowrap

Next up is our title value, nowrapNowrap is the closest White Space value equal in appearance to an exact opposite of normal.  While sequences of white space still collapse into a single whitespace, the text will never wrap to the next line (never say never, because there is one exception: the text will go on forever unless it encounters a < br/ > tag).  Thus,

p
{
white-space: nowrap;
}

produces the following result:

Screen Shot 2013-12-20 at 8.41.07 PM

Bizarre, indeed.  Notice again how the line breaks before and after the text (in this case, white space) were collapsed.  The White Space property is supported by recent versions of all major browsers, but like most CSS properties, its “inherit” value is not supported in Internet Explorer 7 and earlier, and in general HTML is notoriously buggy in those early versions of IE.  Old versions of Opera and Safari will also experience difficulties with two soon-to-be-discussed values, pre-wrap and pre-line.

There are three remaining White Space values, which will be easy to understand after comparing normal and nowrap.

Pre

Pre preserves white space, line breaks and tabs, but does not wrap text.  In other words, pre follows the source HTML exactly.  By definition, pre most closely resembles the exact opposite of normal (fancy yourself a pre kind of person?  anything but normal?  legitimize yourself with a physical understanding of our weird world).  It makes the element behave like a <pre> tag in HTML.  Pre forces the line breaks and white space collapsed by nowrap to appear:

Screen Shot 2013-12-20 at 8.50.33 PM

This time, above and below the text, notice the spacing as it appears in our original HTML.  And as I mentioned earlier, sometimes you want to preserve the codeyness of code; this being especially useful for teaching.  Plus, code is bland enough as it is (no offense), so there’s no harm in a little formatting; a nice, colorful border here and there…

Pre-Wrap

If you like everything about pre except for the fact that it doesn’t wrap text (in fact, it adds line breaks, as you will see below), pre-wrap is my gift to you.  Confine pre to its element:

Screen Shot 2013-12-20 at 8.53.30 PM

Pre-Line

Can’t make up your mind among the above values?  Take a sampling of each with pre-line.  This preserves line breaks like pre and pre-wrap, collapses spaces and tabs like nowrap and normal, and wraps text like normal and pre-wrap.  That’s a complicated way of saying pre-line is pre-wrap minus the preservation of spaces and tabs.  Have a look:

Screen Shot 2013-12-20 at 9.03.19 PM

At first it may be difficult remembering which value does what, so for ease of reference, refer to this table for quick review of the different behaviors of the White Space values:

Screen Shot 2013-12-20 at 8.10.06 PM

This table will be your best friend.  It can get awfully confusing trying to figure out which White Space value to use by comparing pictures.  If you found yourself squinting, embrace your inner sadist and challenge yourself with CSS and HTML for mobile.  But you should have plenty to keep you occupied for the moment.  This was a rather basic example, but like most CSS instruments, the power resides in the person who wields it.