Grow your CSS skills. Land your dream job.

white-space

Last updated on:

The white-space property controls how text is handled on the element it is applied to. Let's say you have HTML exactly like this:

<div>
   A bunch of words you see.
</div>

You've styled the div to have a set width of 100px. At a reasonable font size, that's too much text to fit in 100px. Without doing anything, the default white-space value is normal, and the text will wrap. See the example below or follow along at home with the demo.

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

If you want to prevent the text from wrapping, you can apply white-space: nowrap;

Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code). When the text renders in the browser, those line breaks appear as if they are stripped out. Also stripped out are the extra spaces on the line before the first letter. If we want to force the browser to display those line breaks and extra white space characters we can use white-space: pre;

It's called pre because the behavior is that as if you had wrapped the text in <pre></pre> tags (which by default handle white space and line breaks that way). White space is honored exactly as it is in the HTML and the text does not wrap until a line break is present in the code. This is particularly useful when literally displaying code, which benefits aesthetically from some formatting (and some time is absolutely crucial, as in white space dependent languages!)

Perhaps you like how pre honors white space and breaks, but you need the text to wrap instead of potentially break out of its parent container. That's what white-space: pre-wrap; is for:

Finally, white-space: pre-line; will break lines where they break in code, but extra white space is still stripped.

Interestingly, the final line break is not honored. As per the CSS 2.1 spec: "Lines are broken at preserved newline characters, and as necessary to fill line boxes." so perhaps that makes sense.

Here is a table to understand the behaviors of all the different values:

  New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap

In CSS3, the white-space property is literally going to follow that chart and map the properties to text-space-collapse and text-wrap accordingly.

More Information

Browser Support

Little more complex than the regular support table, since each value has different levels of support:

Browser Version Support of
Internet Explorer 5.5 normal | nowrap
6.0 normal | pre | nowrap
8+ normal | pre | nowrap | pre-wrap | pre-line
Firefox (Gecko) 1.0 (1.0) normal | pre | nowrap | -moz-pre-wrap
3.0 (1.9) normal | pre | nowrap | pre-wrap | -moz-pre-wrap
3.5 (1.9.1) normal | pre | nowrap | pre-wrap | pre-line
Opera 4.0 normal | pre | nowrap
8.0 normal | pre | nowrap | pre-wrap
9.5 normal | pre | nowrap | pre-wrap | pre-line
Safari (WebKit) 1.0 (85) normal | pre | nowrap
3.0 (522) normal | pre | nowrap | pre-wrap | pre-line

Comments

  1. John Fish
    Permalink to comment#

    Chris, you seem to be having a clipping issue with the IE image sprite. Try increasing the width, as it’s the widest of them all.

  2. Adrian Adkison
    Permalink to comment#
  3. swordenium

    Great stuff, bro!
    Correct the typo when you are free :)

     "The white-space property controls how text is handled on the element is is applied to." 
  4. Kevin

    What if you have an element of a specific width and it contains one word that is wider than the box? Is there a way – other than adding some js – to wrap the word to fit in the box with a hyphen?

    If not, this should definitely be considered in the next round of css… imo

  5. Is there any way of setting text to wrap before a word, rather than hyphenated in the middle (other than manually inserting a break <br>)?
    @ Kevin – Chris has another resource which touches on this (but doesn’t address my question, i think): prevent-long-urls-from-breaking-out-of-container

  6. Dave Merrill
    Permalink to comment#

    @Tim Osborn, some useful answers for text wrap control on SO, especially two of mine (;-), http://stackoverflow.com/a/6298738/736006 and http://stackoverflow.com/a/6508168/736006.

    @Chris (and all!), does anyone have a better answer for how to discard whitespace completely than this: http://stackoverflow.com/a/2629446/736006

    (Thanks, great site!)

  7. Dave Merrill
    Permalink to comment#

    (Sorry, forgot to subscribe, can’t w/o a comment apparently.)

  8. John Franks
    Permalink to comment#

    Hi, I’m trying to do something which is pretty basic; I want the xslt code in Visual Studio to look the same as the on the resulting pdf so I don’t waste time doing ‘trial and error’ having to guess when spacing out the fields in VS to get them to align eg:

    Account Number: 6319469991655135
    Balance: £51.28
    Payment of Loans: £0.00

    eg. this is what I would like to be able to do – so a space in xslt is a space on the pdf

    Account Number:  
    Balance: £ 
    Payment of Loans: £

    Can you help?

  9. amit

    hhhhhhhhhhh

  10. Max
    Permalink to comment#

    nice article.

    Please note, I don’t see pre-wrap and pre-line working with IE 8.0x.

    I switched to following doctype hoping that was the issue. But pre-wrap works find in other browsers.

  11. Arturo Torres Sánchez
    Permalink to comment#

    In your text, something says

    which allow the text to be on it’s own line

    but it should say

    which allow the text to be on its own line

  12. S.Ghufran
    Permalink to comment#

    Can you please explain “differentiate between css attribute and elements”

  13. One important thing. W3C validator is marking white-space: nowrap; as non-existing in CSS3, and reporting it as an error.

  14. lingtalfi
    Permalink to comment#

    Thank you so much for summing it up with simple language.
    Good doc.

  15. Permalink to comment#

    font-family: monospace;
    white-space: pre;

    Using above, I am able to preserve the pre on Firefox. But on IE9 and IE8, it becomes a single line. IT does not seem to preserve the newlines. Any idea how to fix that?

    Awesome doc btw!

    • ty
      Permalink to comment#

      I’m having the same problem with IE. white-space: pre-wrap does not work in IE9. Not sure about other IE versions. Works fine in Chrome. Any ideas how to get it to work in IE???

  16. smax
    Permalink to comment#

    When using white-space:Pre-line, an extra line break is added to the top of the text area. Is there a way to remove the extra line that is added?

    • tetra
      Permalink to comment#

      You’ve probably figured this out by now, but if anyone else comes here — it’s because you have two breaks. Depending on your IDE’s word-wrap setting, it might be hard to tell where a manual break was placed. There shouldn’t be any extra breaks between the lines or the CSS will include it.

      i.e.

      An appropriate
      use of pre-line
      that will wrap each
      line.

      vs.

      A probably unwanted

      use of pre-line that creates a visual distinction

      for the user, but confuses the CSS.

  17. Adam Steel

    I just love this site. It seems like I end up here three times a week, finding good answers to issues I have. Thank you, and keep up the good work.

  18. Cee

    Hi Folks,

    I’m not geeky so please help. I’m using wordpress. When I press SPACEBAR twice after a fullstop, the second or (nth) row in a paragraph is being indented and not lining up to the left. This only happens when I press SPACEBAR twice (after previous sentence) towards the end of the previous line where the text is forced to wrap onto second line. Am I missing something from my CSS sheet?

  19. Ryan McKay
    Permalink to comment#

    Anyone else having problems with white-space: pre?
    When I use it on a textarea in Chrome 34.0.1847.137 the text still wraps…even though it says under “Text Wrapping” that it shouldn’t.
    New lines, spaces, tabs etc all act as expected…but long lines are still wrapping :(

    Could this be a behavior specific to only textareas?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".