Display element as preformatted text via CSS

html css whitespace pre
Dagg Nabbit picture Dagg Nabbit · Mar 17, 2012 · Viewed 59.8k times · Source

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>

Answer

BoltClock picture BoltClock · Mar 17, 2012

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>

Related questions

Render a string in HTML and preserve spaces and linebreaks

I have an MVC3 app that has a details page. As part of that I have a description (retrieved from a db) that has spaces and new lines. When it is rendered the new lines and spaces are ignored by …

Read More
Remove "whitespace" between div element

This is my HTML code <div id="div1"> <div></div><div></div><div></div><br/><div></div><div>&…

Read More
Ignore whitespace in HTML

Is there anything in HTML/CSS that tells the browser to ignore whitespace completely? So many times when you want to put, say, two images next to each other - you try desperately to keep the HTML readable, but the …

Read More