Make “Pre” Text Wrap
Text in <pre> tags doesn't wrap by default. For example, see the code snippet below! If this is causing layout problems, one solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.
/* Browser specific (not valid) styles to make preformatted text wrap */
pre {
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; /* Internet Explorer 5.5+ */
}
So, does o-pre-wrap work in Opera 8, 9, and 10 as well?
And what of web-kit browsers? (I sincerely hope they support the CSS3 declaration itself.)
After all the Google searching I feel like doing, this solution is the only one that pops up anywhere. It seems rather outdated…
doesn’t work in Opera 10 and IE8
Demo links seem to be broken for this article.
wow it work fiend. Thank a lot. I only added following two codes but it work. Is it OK?
white-space: pre-wrap;
word-wrap: break-word;
Please Give me example Sites
Awesome! Was going nuts on a new responsive theme I was building. Couldn’t figure out why the content wasn’t compressing on some pages like it was on other pages. Finally figured out it was the <pre><code> wrapped content I had included. Figured I was going to have to enter the content in such a fashion as to keep it from extending or do an overflow hidden but your solution worked like a charm! Thanks for the share.
thank you
This worked, but Firefox was still bugging on PRE, because my box model wasn’t being inherited. FF with padding in the PRE block causes the page to scroll horizontally, even with overflow hidden. Fix below:
pre, code { padding:30px; box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing:border-box; display:block; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; width:100%; overflow-x:auto; }PS – If still having issues, try replacing the padding with something like:
border: 12px solid transparent;I think this one is more bulletproof
pre {
word-break: break-all; /* webkit /
word-wrap: break-word;
white-space: pre;
white-space: -moz-pre-wrap; / fennec /
white-space: pre-wrap;
white-space: pre\9; / IE7+ */
}
demo http://jsbin.com/bulletproof-responsive-pre/2/edit