<pre> tag in HTML with fixed width

Question

I'm using the pre tag to display preformatted text (including line breaks, spaces and tabs etc.) But large lines without line-breaks are shown in one line and a scroll bar is added.

I want to limit the width of the pre tag (such that large lines are broken up to come to new lines and no scroll is required. Is this possible or is there some other tag that I can use?

Thanks.

Code is something like:

$.post("contr.php",q1,function(data){ $("#el_text").html("< pre>"+data+"< /pre>");});

Answer 1

pre{
    white-space:pre-wrap;
}

..does what you want in Firefox and Chrome - wraps the lines but preserves whitespace. But unfortunately IE doesn't seem to support it (although I haven't looked in IE8 yet).

Edit: IE8 supports it.

Answer 2

There is a way to do it with CSS in a few current browsers, but support is not good for older browsers. You can apply a style like so:

<pre style="white-space:pre-wrap;">Lorem ipsum dolor.... turpis.</pre>

It is supported in IE8, Firefox 3, and Safari 3.

Answer 3

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