Sunday, September 6, 2009

Wrapping Text within <pre> Tags


This is the trick that let's you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn't wrap:

Your developer can't fix it?


In the css, give the pre tag these attributes:

pre {
background-color: #eee;
padding: 0.75em 1.5em;
font-size: 12px;
border: 1px solid #ddd;
/*TEA 04/07/07, below code added to make the PRE tag wrap.*/
white-space: pre-wrap; /* css-3 */
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;
}

or in the HTML in the pre tags style attribute put:
<pre style="
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
">

This should work with most browsers.

No comments:

About This Blog

Lorem Ipsum