Wrapping Text Inside Pre Tags
I sometimes display little snippets of code on this site. For example, here, here, and here. To do this, I use the Code Markup wordpress plugin.
If you’re using Firefox, you may notice the long lines in my Digg Integrator fix post. It’s not really a problem for me having those really long lines in Firefox. Why? Because Firefox still displays my sidebar correctly. Internet Explorer is a totally different story though. When there’s long lines like that, my sidebar will appear at the very bottom of the page in IE.
The long lines are caused by use of the pre html tag. The pre tag preserves spaces and line breaks in a chunk of text. Perfect for displaying snippets of code. However, some lines of code are quite long and will run off the page. This is exactly why my sidebar was getting pushed to the bottom of the page in IE.
So, I set out looking for a method to wrap text contained within pre tags. Google found exactly what I was looking for. Wrapping text inside pre tags is quite easy, all that’s required is a simple addition to your css:
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+ */
}Quite simple. After adding that CSS, the text in pre tags still doesn’t wrap in Firefox, but I don’t care because Firefox displays the rest of my page as it should. Now, when you view a page in IE with a long line, the text is wrapped and my sidebar content appears at the top of the page instead of the bottom.
For consistency sake, let’s make these long lines wrap in Firefox too. This is extremely simple. It only requires adding a few characters to the CSS shown above. For text wrapping in Firefox, use this CSS:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* 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+ */
}
Notice the only difference between the first and second examples is the addition of “!important” to the third line in example 2. After adding that little bit, your text between your pre tags should wrap well in basically every browser that’s currently in use.
UPDATE 3/10/2007
If you can’t seem to get the css above to work, give the css below a shot. I just set a width on the pre tag. When the width is set to 100%, you’ll get a horizontal scrollbar when viewing in IE7. That’s why I’ve set the width to 99%. The code will display just fine in IE6, IE6, and FireFox when width is set to 99%. I have not tested Opera. Try this updated CSS if you’re having issues with the original CSS from above.
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* 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+ */
width: 99%;
}
UPDATE 6/4/2008
Markku Laine posted some css in a comment that seems to work better than the original css I posted. It works in IE, Safari, and FireFox. Try using Markku’s css below if the previous examples don’t work for you.
pre {
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
/* width: 99%; */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Update 1/20/2011
Some code Max posted in a comment also seems to be working well for many people. It may be worth trying as well:
height: 120px;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */You might like these posts too::
- Improved Permalink Redirection
- IE UI Designer Switches
- Browsers: Fewer Switching
- Digg Integrator Plugin Fix
- K2 0.9.1 Released
[...] This tutorial shows how to wrap text within pre html tags. It’s useful for displaying code on your site, especially when lines of code are quite long and end up breaking your site’s layout (especially in IE). It’s a relatively simple and there are a few different options presented. [...]
[...] é habitual, o Google eventualmente devolveu a solução a este problema, via blog do Tyler Longren (e uma adenda do Markku Laine). Os estilos necessários para forçar as quebras de linha dentro das [...]
[...] This tutorial shows how to wrap text within pre html tags. It’s useful for displaying code on your site, especially when lines of code are quite long and end up breaking your site’s layout (especially in IE). It’s a relatively simple and there are a few different options presented. [...]
pre {
margin-bottom: 10px;
margin-top:-2px;
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
style=”table-layout: fixed;”
width: 99%;
}
This worked for me.. but again.. i am using a table inside PRE tag with only tr and not td.The problem faced here is that tr shows spaces below the next display comes after few spaces.
Mine worked in the following manner.
pre {
margin-bottom: 10px;
margin-top:-2px;
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
style=”table-layout: fixed;”
width: 99%;
}
Finally arrived to the perfect solution..
Using the code as follows:
Your Text
But make sure to use Your Text in the same line otherwise it will create an extra tab white spaces before the text. Hope that helps. code works in IE6, IE7 and Mozilla.
table border=”0″ style=”table-layout:fixed;WORD-BREAK:BREAK-ALL;”
tr
td/pre/your text/../pre/…/td
/tr
/table
[...] This tutorial shows how to wrap text within pre html tags. It’s useful for displaying code on your site, especially when lines of code are quite long and end up breaking your site’s layout (especially in IE). It’s a relatively simple and there are a few different options presented. [...]
[...] This tutorial shows how to wrap text within pre html tags. It’s useful for displaying code on your site, especially when lines of code are quite long and end up breaking your site’s layout (especially in IE). It’s a relatively simple and there are a few different options presented. [...]
@Deng Zhi You rock!
Here’s mine :
height: 120px;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */
Thanks for the very last line! It was most definitely crucial in getting the line to break in IE6.
Thanks for the post. The width field solved my problem :-)
Однажлы в студеную зимнию пору. Бродил Я по нету. Наткнулся на пост. Понравилось очень! Респект выражаю! И даже закладки себе добавляю!
[...] And one thing that I found out was the <pre> tag likes being a bitch. I had to google to find out how to wrap it according to my post content width, and I stumbled upon this site – Unwakeable. [...]
Thanks guys, IE 7 was not formatting the pre text as expected, the above tip & discussion helped a lot.
htp://www.prasnah.com
[...] Interessant dazu auch: Wrapping Text Inside Pre Tags [...]
I used the last CSS, the text wrapped, but it creaeted white space on the right side. See this page:
http://www.gurufocus.com/wiki/index.php5?title=Bip
Please help.
[...] http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/ [...]
Thanks a lot …this resolved our problem
Very big thanks!
[...] of that. Yes, by default the pre tag does not wrap. But you can override this behavior in CSS. http://www.longren.org/2006/09/27/wr…side-pre-tags/ If you are a stickler for keeping data and presentation separate, this approach may be [...]
Thank you for this article. I have the same exact problem with IE and , but this one helps me a lot.
[...] stumbled across this great article by Tyler from http://www.longren.org, explaining how to fix text wrapping for your code [...]
G’day,
I have a variation of this I use to display long URLs. It seems to work in most things, but still breaks formatting in Thunderbird. If anyone has a solution, I’d love to see it.
.longurl {overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
/* width: 400px; */
word-wrap: break-word; /* Internet Explorer 5.5+ */
_white-space: pre; /* IE only hack to re-specify in addition to word-wrap */
font-size: 9px; font-family: Courier New, Courier, monospace;
display: inline;
}
Best Regards, Lloyd Borrett.
http://www.borrett.id.au
Thank you!
You are probably God. Thank you I was pickin my brain at this for quite some time!
Thanks for this, exactly what I needed and it fixed my problem. :)
Works great! Got me out of a jamb. Thanks to you all.
[...] Wrapping Text Inside Pre Tags – http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/ [...]
HI
The text embedded inside the pre text starts from the middle of the page. How can it be corrected. Please help
work like a charm ! excellent :)
to use it with shjs code highlighter embed this css into pre.sh_sourceCode .
I tried all the solutions above and it appears to work most of the time. However, sometimes when a line gets wrapped, I see that the last word in the line gets printed twice, i.e. it is the last word on the line and also the first word on the next line. Anyone else run into this? Only happens on IE6 and IE7.
Add another to the chorus of thank-yous to Blaatschaap. The reason it wasn’t working, and I was getting frustrated was because indeed I was trying to use the PRE tags within a table cell. Finally my app looks good, and I can start on something else!
[...] sapevo fosse possibile far rifluire il testo anche all’interno [...]
[...] Wrapping Text Inside Pre Tags [...]
I have tried all this but nothing works
i want pre tag for data enter by user in proper format and with dis i want to specify width 50% if td….this both is not working can anyone help me out?????
[...] ist da schon etwas sicherer. Im Blog “Unwakeable” von Tyler Longren bin ich mal auf ein schönes CSS-Format gestoßen, dass jeden Browser gut [...]
YES! Thanks Markku. That DOES work! The horizontal scroll line is really a minor issue. Much better than having the line go off the screen.
The one below works best for me.
pre {
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
/* width: 99%; */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
It works with IE, Safari, and Firefox. Only downside is that if content contains long URLs it generates a horizontal scroller in Firefox 2. This will be fixed in Firefox 3.
Josep M., I’ve got exactly the same problem. Long lines w/o spaces (e.g., URLs) are not wrapped/don’t obey the set width value of the div container in Firefox 2.0.0.14. However, with IE 7.0.5730.11 wrapping works fine. Otherwise, all code snippets work fine for me in both browsers.
Has anyone found a solution for this one yet?
-Markku
Ps. The structure of the web page is as follows: body > div > pre, where div has only width and border.
not working in ff. Is there any solution to this?
Well, I have tried ALL of the code snippets suggested here and I must say I haven’t been able to get it to work with Firefox 2.0.0.14
I have a really, really long URL which I cannot get to wrap to the next line. It will do it with IE but not with Firefox. With FF it will run off the div container and the text will become invisible against the the dark background I have.
[...] Found via this bog. [...]
Thank you, blaatschaap! I have been pulling my hair out all day on this expanding table with lengthy URLs in IE. The table-fixed rule solved it immediately. I was able to remove all of the other ‘guesses’ I had added that never worked.
If I could kiss you……..I wouldn’t but I’d sure as hell buy you a beer!
[...] Wrapping Text Inside PRE Tags [Thanks, Lorelle VanFossen] Written by Amit Agarwal for Digital Inspiration. All Rights Reserved. [...]
I had almost given up on accomplishing this… the problem is that table-layout: fixed forces all columns to be the same size, which is not what I want.
However, I got the behavior that I wanted when I embedded a table within the desired cell – other columns were appropriately sized, and the pre text preserved line breaks, but wrapped when necessary, and the table never went off screen. This needed the style stuff, plus the table-layout: fixed on the inner table.
So I would:
table… tr… td… table style=”table-layout: fixed;”… tr… td… pre… wrapped text… /pre… /td… /tr… /table… /td…
This works on IE6.
All,
I too want to wrap text thats inside a table cell.
I cant seem to get the code for working on the latest firefox. My firefox version is
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
It does work on IE 6.
My css file has the following:
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+ */
_white-space: pre; /* IE only hack to re-specify in addition to word-wrap */
}
I have added
style="table-layout: fixed;"to table tag. (Without this, i wasnt working in IE as well)The problem with firefox is the table width is now correct & scrollbar does not display, however the content is displayed without wrapping, overlapping the content in the adjacent cells if you understand what i mean.
Has anyone got the above solutions working for Firefox 2.0.0.11?
[...] Wrapping Text Inside PRE Tags [Thanks, Lorelle VanFossen] Written by Amit Agarwal for Digital Inspiration. All Rights Reserved. [...]
I want use tag inside a tag, please give me an idea. It would be a great pleasure if i get a solution for this issue.
Thanks in advance
Regards,
Vino
[...] Techworld.com – Techworld Security News – anti-virus software, intrusion prevention, security softwa… wrote an interesting post today on Wrapping Text Inside Pre Tags at T. LongrenHere’s a quick excerpt/* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5… [...]
[...] проблемой. Сегодня же пришлось погуглить и найти красивое CSS решение проблемы: pre { white-space: pre-wrap; /* css-3 */ [...]
sorry in td if i add WORD-BREAK:BREAK-ALL it is working in IE but not in mozilla