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;
I used these same two lines, Chathu. Works like magic, huh! I used it to automatically wrap the text of a submit button. Neat solution!! Thanks, Chris!
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:
Your Webkit Code Dont Have (( – )) It Must Be
-webkit- Instead Of webkit
And Please Add The Webkit First Then Mozilla Then The Rest Of Other Codes
-webkit-
-moz-
property without prefix
Lore ,
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
^ +1
I was struggling to get the pre to wrap and not break the width of a responsive site. Marco’s solution works.
Thank you, Marco! Works brilliantly!
the problem is that it doesn’t break at words or punctuation like the real code next to it but at individual letters. any workaround for that? THANKS!
Fantastic Marco! I was struggling a lot, finally your solution works for me
Thank you for this. I had been hitting my head against my desk since yesterday. Made my day :). It’s the little things you know….
can any one help me ,,i have some code of html and java ,, i want to store it in my database so that i can further use it to display the required file ,what format should i use to send it to database
Hi, this solution does not work in internet explorer 10
Hi,
This was good solution for my blog because i write a lot of terminal Linux commands and i use pre to make things to look better.
Thank you !
Thank you Marco. It worked.
is it possible to have it break on words rather than characters?
Never mind I figured out my issue. I was trying to use this on a form button and was having issues with the characters breaking oppose to the words. I used “white-space: normal !important;” and it worked fine.
same question I have. tried your solution on regular code, Christina. still breaks on characters…
I’m not really sure what I’d do without this awesome site! Chris, thank you for sharing your super extensive knowledge. I’m just getting started with web development and this is my go-to site for any help I need (and pretty much my last stop since there is always an answer!).
Thank you.
Jay
The code is not working with Opera 10, is there any solution?
To prevent words from being broken on the wrap’ing from
white-space: pre-wrap;you can also use:^+1
word-break: keep-all;This worked like a charm, thanks!
I got Opera version 12. I have my settings for webpages set to ‘Fit to Width’. But there are certain webpages that I need to turn this feature off on. I got Stylish installed. What code can I use for a specific webpage to ignore ‘Fit to Width’?
Marco.. you’re a genius!
Hi there,
Thank you for this, it worked great, however, is there a way to style the width of the pre tag (with the word wrap) to automatically size within a table or div?
I have been struggling with this for days, any help or suggestions will be greatly appreciated
Thanks
Hi, I’m testing Crayon for highlighting my pre code,
how can i force plugin to use: word-break: keep-all;
, and prevent words from being broken ?
Thanks for adivice, best regards Sparky’s :)
Thanks, this was a lifesaver
Thank you! Very handy! 8-)
Really great, exactly what i was look for. Thank you :)
Worked like charm.
But doesnt word-wrap:break-word -> be sufficient
what is the use of white-space:pre-wrap ?
Thanks!
word-break: keep-all;if this is set to
word-break: break-all;then all the otherwhite-space: blahis ignored. worth noting perhapsThank you this article really help me to find a solution