CODEWITHSUNDEEP
htmlcsstags
Edward Wong Hau Pepelu Tivrusk
Edward Wong Hau Pepelu Tivrusk

Reputation: 1664

<pre> tag in HTML with fixed width

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?

Code is something like:

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

Upvotes: 48

Views: 33312

Answers (3)

Karim
Karim

Reputation: 18597

An exhaustive way of supporting it in almost all browsers, copied verbatim from Willy Duitt's 2004 post on CodingForums.com:

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+ */
}

Upvotes: 95

Jaison
Jaison

Reputation: 1

If space is being allocated to the right of the block even after doing what Karim said Then maybe you have enclosed inside .

Table tag allocates space for the entire pre string even when the content may be word wrapped This leads to blank areas on right of pre block

In this case replace with some other tag, like div or paragraph

Upvotes: 0

Dan
Dan

Reputation: 63400

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.

Upvotes: 23

Related Questions