122

Is there any way to emulate the display of a pre element via CSS?

For example, can I keep the whitespace intact in this div by using a CSS rule?

<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>
Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141

4 Answers4

205

Use white-space: pre to preserve whitespace preformatting as in the pre element. To go a step further, also add font-family: monospace, as pre elements are typically set in a monospace font by default (e.g. for use with code blocks).

.preformatted {
    font-family: monospace;
    white-space: pre;
}
<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>
jesterjunk
  • 2,342
  • 22
  • 18
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    I didn't think to include the `font-family` declaration. +1, for the thoroughness =) – David Thomas Mar 17 '12 at 20:55
  • 5
    While I'm waiting to accept this answer, could you explain the difference between `pre` and `pre-wrap`? I assume `pre-wrap`... wraps? – Dagg Nabbit Mar 17 '12 at 20:57
  • 2
    @GGG: That's right. See [a comparison](http://jsfiddle.net/BoltClock/2TA8g/1). – BoltClock Mar 17 '12 at 21:00
  • 1
    @GGG: Exactly. See https://developer.mozilla.org/en/CSS/white-space – Marat Tanalin Mar 17 '12 at 21:00
  • 1
    How do you guys know about this stuff? I spent some time barking up the wrong tree (`display`) but never thought to look at `white-space`. – Dagg Nabbit Mar 17 '12 at 21:02
  • @GGG: Call me crazy, but I enjoy studying the specifications on a regular basis. – BoltClock Mar 17 '12 at 21:04
  • @GGG: Experience? Most people don't know about some more niche CSS selectors, like azimuth. Haha. –  Mar 17 '12 at 21:04
  • @Joshua M: That's a property. One from the long-gone [aural styles](http://www.w3.org/TR/CSS21/aural.html#spatial-props) spec, now buried by the Speech module where it quite simply doesn't show up anywhere in level 3, not even in other properties. I bet 9 out of 10 of those who *do* know about `azimuth`... saw it in Dreamweaver's CSS autocomplete. (I did.) – BoltClock Mar 17 '12 at 21:06
  • e: @BoltClock I just read about `azimuth` and it actually sounds pretty cool.... haha. I never used it or knew what it was, I just knew it existed. –  Mar 17 '12 at 21:07
  • @Joshua M: No clue. I never bothered studying aural styles. – BoltClock Mar 17 '12 at 21:09
  • @BoltClock: Me either, seems pretty useless, can't think of a practical use for it.. –  Mar 17 '12 at 21:10
  • If "azimuth" means the same thing it does in astronomy, it would probably be the direction the sound is coming from, in angular coordinates. – Dagg Nabbit Mar 17 '12 at 21:11
  • @GGG: Thats exactly what it is :-) –  Mar 17 '12 at 21:12
  • and optionally: `word-break: break-all;` – gregn3 Jun 10 '15 at 19:02
57
.preformatted {
   white-space: pre-wrap;
}

I think "pre-wrap" is better. It can help with long length in line.

Kondrashenkov Anton
  • 570
  • 4
  • 4
12

Yes:

div.preformatted {
    white-space: pre;
    }

Reference:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
3

inorder to get <pre> you may use;

div.preformatted{ white-space: pre ; display: block; }
Govinnage Rasika Perera
  • 2,134
  • 1
  • 21
  • 33