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 Web Developer Bootcamp 2022

Last Updated March 2022

  • 615 lectures
  • All Levels
4.7 (235,121)

COMPLETELY REDONE – The only course you need to learn web development – HTML, CSS, JS, Node, and More! | By Colt Steele

Explore Course

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:

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:

<div class=”box”>
  <h3>
  normal
  </h3>
  <div class=”normal”>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vivamus vestibulum non arcu ut commodo.
          Etiam auctor, elit ut consequat ultrices, justo felis ultricies quam, eu vehicula eros velit ut mauris.
 
  </div>
</div>

<div class=”box”>
  <h3>
  nowrap
  </h3>
  <div class=”nowrap”>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vivamus vestibulum non arcu ut commodo.
          Etiam auctor, elit ut consequat ultrices, justo felis ultricies quam, eu vehicula eros velit ut mauris.
 
  </div>
</div>

<div class=”box”>
  <h3>
  pre
  </h3>
  <div class=”pre”>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vivamus vestibulum non arcu ut commodo.
          Etiam auctor, elit ut consequat ultrices, justo felis ultricies quam, eu vehicula eros velit ut mauris.
 
  </div>
</div>

<div class=”box”>
  <h3>
  pre-line
  </h3>
  <div class=”pre-line”>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vivamus vestibulum non arcu ut commodo.
          Etiam auctor, elit ut consequat ultrices, justo felis ultricies quam, eu vehicula eros velit ut mauris.
 
  </div>
</div>

<div class=”box”>
  <h3>
  pre-wrap
  </h3>
  <div class=”pre-wrap”>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vivamus vestibulum non arcu ut commodo.
          Etiam auctor, elit ut consequat ultrices, justo felis ultricies quam, eu vehicula eros velit ut mauris.
 
  </div>
</div>

<div class=”box”>
  <h3>
  break-spaces
  </h3>
  <div class=”break-spaces”>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vivamus vestibulum non arcu ut commodo.
          Etiam auctor, elit ut consequat ultrices, justo felis ultricies quam, eu vehicula eros velit ut mauris.
 
  </div>
</div>

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:

.box {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 20px;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  width: 200px;
}

body {
  margin: 2em 3em;
}

.normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

.pre-line {
  white-space: pre-line;
}

.pre-wrap {
  white-space: pre-wrap;
}

.pre-wrap {
  white-space: pre-wrap;
}

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.

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

CSS white-space set to normal

nowrap

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

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.

CSS white-space set to nowrap

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:

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.

CSS white-space set to pre

pre-line

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

Here is how the HTML displays with this tag:

CSS white-space set to pre-line

pre-wrap

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

Here is the result when we use this value:

CSS white-space set to pre-wrap

break-spaces

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

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

CSS white-space set 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:

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

 New linesSpaces, tabsText wrappingEnd-of-line spacesEnd-of-line other white space
normalCollapseCollapseWrapRemoveHang
nowrapCollapseCollapseNo wrapRemoveHang
prePreservePreserveNo wrapPreserveNo wrap
pre-wrapPreservePreserveWrapHangHang
pre-linePreserveCollapseWrapRemoveHang
break-spacesPreservePreserveWrapWrapWrap

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:

Here is an example of using these values in CSS:

.visible {
  overflow: visible;
  white-space: nowrap;
}

.hidden {
  overflow: hidden;
  white-space: nowrap;
}

.scroll {
  overflow: scroll;
  white-space: nowrap;
}

.auto {
  overflow: auto;
  white-space: nowrap;
}

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

CSS overflow values

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.

Page Last Updated: April 2022

Top courses in CSS

Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Jonas Schmedtmann
4.8 (35,919)
Bestseller
CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)
Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller, Manuel Lorenz
4.7 (13,844)
Bestseller
50 Projects In 50 Days - HTML, CSS & JavaScript
Brad Traversy, Florin Pop
4.7 (7,423)
Build Responsive Real-World Websites with HTML and CSS
Jonas Schmedtmann
4.8 (75,449)
Bestseller
Responsive Web Design Essentials - HTML5 CSS3 Bootstrap
Daniel Walter Scott
4.7 (4,464)
Bestseller
HTML5 + CSS3 + Bootstrap: The Beginner Web Design Course
Phil Ebiner, Nick Walter, Video School
4.7 (1,414)
SASS - The Complete SASS Course (CSS Preprocessor)
Code And Create, George Lomidze, Lasha Nozadze
4.5 (939)
Bestseller

More CSS Courses

CSS students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo