in reply to Formatting CGI script error messages

<style type="text/css">

pre {
    background: #EEEEEE;
    border: 1px solid #CCCCCC;
    width: 100%;
    /* overflow: scroll; */
    /* IE only */
    word-wrap: break-word;
    /* non-standard */
    white-space: normal;
}

</style>

<pre>
this is a very very very very very very very very very very very very 
+very very very very very very very very very very very very very very
+ very very very very very very very very very very very very very ver
+y very very very very very very very very very very very very very ve
+ry very very very very very very very very very very very very very v
+ery very very very very very very very very very very very very very 
+very very very very very very very very very very very very very very
+ very very very very very very very very very very very very very ver
+y very very very very very very very very long string
</pre>

[download]

update: added IE only CSS

update 2: added non-standard CSS and commented out overflow: scroll as its no longer needed

Hrm. It seems that white-space is standard. IE doesn't support it however ... but who uses that these days anyway :) Above code works in all browsers I have at hand in any case

update 3: started from scratch

After more deliberation, it seems I've still not solved your problem - except inadvertantly in IE - so heres another attempt. Its not perfect, but its closer.

<style type="text/css">

pre {
    padding: 0.5em;
    background: #EEEEEE;
    border: 1px solid #CCCCCC;
    overflow: auto;
    /* non-standard */
    /* white-space : normal; */
}

* html pre {
    /* IE only */
    word-wrap:break-word;
}

</style>

<pre>
this is a very very very very very very very very very very very very 
+very very very very very very very very very very very very very very
+ very very very very very very very very very very very very very ver
+y very very very very very very very very very very very very very ve
+ry very very very very very very very very very very very very very v
+ery very very very very very very very very very very very very very 
+very very very very very very very very very very very very very very
+ very very very very very very very very very very very very very ver
+y very very very very very very very very long string

and 

  spacing of     things 
</pre>

[download]

Replies are listed 'Best First'.
Re^2: Formatting CGI script error messages
by shay (Beadle) on Nov 17, 2004 at 16:46 UTC

    I didn't know about the "overflow: scroll" thing. Pretty neat. It got me looking back at HTML/CSS documentation, and I actually found that <pre> has a "wrap" attribute!

    Unfortunately, the "wrap" attribute doesn't work in IE. However, your "word-wrap: break-word" trick does (thanks! -- I didn't know about that one either). So now I have this, which works in both NS and IE: 

    <pre style="word-wrap: break-word" wrap>...</pre>

    (Note that "white-space: normal" is no good, though, because it collapses multiple spaces and newlines (at least, it does in NS; IE seems to not honour that either).)

    - Steve

[reply]
      For Opera and Mozilla add the styles 
          white-space: -o-pre-wrap;
    white-space: -moz-pre-wrap;

      [download]
[reply]
[d/l]

In Section Seekers of Perl Wisdom