Display Element as Preformatted Text via CSS

Display element as preformatted text via CSS

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>

Display text as it is in html blockquote tag

Add this to your css:

blockquote {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
}

How to change a span to look like a pre with CSS?

Look at the W3C CSS2.1 Default Style Sheet or the CSS2.2 Working Draft. Copy all the settings for PRE and put them into your own class.

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

pre tag in HTML with fixed width

An exhaustive way of supporting it in almost all browsers:

pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
}

I had the same problem not long ago and had found the solution here:
http://codingforums.com/showthread.php?t=43293

How do I wrap text in a pre tag?

The answer, from this page in CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Is there any reason for using p tag instead of pre tag in html

I would use <p> for paragraphs and <pre> for pre-formatted text.

They are nothing like each other other than sharing the first letter :-)

From those links:

A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.

The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

---

Related Topics