CSS Nowrap: How To Use the CSS White-Space Property

When text loads on a web page, the default action is to print the text on one line until it reaches the end, and then the text wraps and continues on the next line. However, there may be times when you don’t want this to happen, like when you want to use CSS nowrap.

In this article, we will look at how you can use the nowrap value, along with the CSS white-space property, to change this default wrapping action. We will also look at other methods you can use to prevent text from wrapping.

What is CSS nowrap?

The nowrap value indicates that the text in an HTML element should not wrap. There are actually a few ways to apply this element depending on what type of element you are trying to modify. One way to ensure that the text in an element doesn’t wrap is adding the HTML nowrap attribute to the element and not using any CSS at all, but you can only use this attribute with some elements, and it is not very flexible. Using CSS is usually the best way to go, so let’s look at how to do that.

The CSS white-space property

The most common way to prevent text from wrapping is using the white-space property of CSS. This property will accept one of these five values:

• normal
• nowrap
• pre
• pre-line
• pre-wrap
• break-spaces

As you can see above, nowrap is one the values you can set this property to. That is really all you have to do to prevent text from wrapping in a certain element, but let’s examine each one of these values so you know which to use when.

CSS white-space property values

To demonstrate how the CSS white-space property works, we will be using the following code. Here is the HTML:

You will notice in the HTML above, I put some extra tabs and line breaks in the text. But all the text in each element is the same, so you can see how the white-space property affects these white-space characters.

Here is the CSS code:

If you are interested in looking at this code live, visit this JSFiddle. Now let’s look at what is happening when we set each of these values.

normal

The default value of the CSS white-space property is normal. When white-space is set to normal, there are a few rules that are applied to the text.

• Sequences of multiple white space characters are collapsed. That is, they are reduced to a single white space character. This happens even between words.
• Newline characters are treated the same as white space characters.
• Lines are broken whenever needed to fill elements.

Here is the result of setting the white-space property to normal:

nowrap

When you set the CSS white-space property to nowrap, these rules are applied to the text:

• Sequences of white-space characters are collapsed like in normal.
• Line breaks are ignored, though and all the text in the element is put on one line.

Here is how the block that has nowrap looks in the browser. Everything gets put on one line, even if it gets cut off. It doesn’t look very good right now, but when this CSS property is set to nowrap, it is usually combined with the CSS overflow property in web design to create different effects, which we will describe later. I highlighted the text, so you can see it extends beyond the block.

pre

This CSS value works similar to the HTML <pre> tag. When you use the pre value in the white-space property, the following rules apply:

• Sequences of white space characters are preserved, not collapsed.
• Lines are only broken where there are line breaks or <br/> tags in the source.

Here is how it looks when it is used in the HTML code above. Notice that you can actually see the tabs I put in the text, and the lines break exactly as I wrote them.

pre-line

When you use the pre-line value, these rules are applied:

• Sequences of white spaces characters get collapsed.
• Lines are broken at <br/> tags, new lines in the source, and when the text reaches the edge of the element.

Here is how the HTML displays with this tag:

pre-wrap

When you set the white-space property to pre-wrap, the browser applies these rules:

• Sequences of white space characters are preserved, not collapsed.
• Lines are broken at <br/> tags, new lines in the source, and when the text reaches the edge of the element.

Here is the result when we use this value:

break-spaces

The behavior of break-spaces is the same as pre-wrap, except:

• Preserved white space characters will take up space, even at the end of the line.
• Line breaks can happen after any white space character, including any one in a sequence of white spaces.

Here is our text when we set white-space to break-spaces:

How browsers handle white-space

It can be hard to distinguish what each of these values do, so it helps to have a breakdown. Refer to the this list of terms for definitions:

• Collapse: Collapsing applies to white space. When white space is collapsed, multiple spaces characters in text are reduced to a single character.
• Wrap: Content starts on one line and continues to the next when it reaches the end of the element which contains it.
• No wrap: Content only displays on one line.
• Preserve: This means to “preserve” text spaces, line breaks, tabs, and other formatting characters in the text. It is often used for code and other text where line breaks and white spaces are important.
• Remove: This is exactly what it sounds like. Sometimes white space at the end of a line will be simply removed.
• Hang: This term is used to determine what will happen to white space. If it hangs, it will remain at the end of the line. If not, it will go on the next line.

Here is a table that summarizes the behavior of white-space values:

Handling overflow when using nowrap

The CSS overflow property tells the browser what to do with content when it is too big to fit in an area. When you are setting white space to nowrap, you usually want to combine this with the overflow property so the text doesn’t just get cut off abruptly when it reaches the edge of an element like it did in the example we have above.

You can set the CSS overflow property to one of the following values:

• visible: This the default value. The overflow is not cut off. The content continues to render outside of the element.
• hidden: The overflow is cut off, and the rest of the content will not be seen.
• scroll: The overflow is cut off, but a scrollbar is added so you can scroll to see the rest of the content.
• auto: This is like scroll, but it adds scrollbars only when necessary instead of always visible.

Here is an example of using these values in CSS:

And here is what we get when we apply these styles to the block we used in our last section of code:

You can also see this code running live and experiment with it at this JSFiddle.

CSS is a powerful language as we have seen above. Many developers think they have to use JavaScript to get some of these effects, but you can do it with plain CSS. To learn more about CSS, read our articles on CSS overlay techniques or the difference between CSS and SaSS. But to really build your skills, start with one of our many popular CSS courses.