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%;
}Popularity: 25% [?]
(8 votes, average: 4.88 out of 5) 
I was just about to figure this out on my own and write a post on it, but I decided to google it instead so I could watch the Late Late Show. Good looking out, way to come through in the clutch.
-Kabari
Glad I could help Kabari. No sense missing some good TV to do what others already have. :)
Google is how I found this article!
The word-wrap:break-word CSS for IE is fine if you have word boundries to break on. If you don’t (I want to force very long lines of XML in a block to wrap) that solution won’t work.
Thanks for the excellent write up, it’s helped me out a lot. However I get one bug with it, here’s an example:
The quick brown fox jum
jumps over the lazy dog
In the first line (and the 1st line only), the last word is repeated twice (jump in the example). The first instance has the word running off the end of the 1st line. The second instance is the word wrapping at the beginning of the 2nd line like it should. The 1st instance is like a rasterized artifact, you can’t actually select the text. Anybody else getting this?
i get the same error in some instances where the last few words in the first line are repeated.. odd.
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+ */
}
This is not working in Mozilla
This works in Firefox 2.0 and IE7:
pre {
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 */
}
Found at: http://cheeaun.phoenity.com/weblog/2005/06/whitespace-and-generated-content.html
Ok…I like the idea that this PRE code listed above fixes PRE in all those browsers.
I want to use it.
How should it look in my external style sheet?
How should it look in my html?
I am a tad new to this. I am unable to figure that it from the code above.
In my style sheet I would write it as #pre{insert code here}
There is no # in the above code.
Then in my html…I am not sure how to write it.
Any help is appreciated.
Thanks.
Tiik
tiik: The code I listed in the post goes in your external style sheet. Then, anything in your HTML encapsulated in pre tags will inherit the styles from your external style sheet, assuming your external style sheet it being included properly.
Let me know if you have more questions or would like me to clarify anything.
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+
}
the above code is not working in Firefox :(
The solutions presented above work in IE 6 and IE 7 only if PRE tag is not inside TABLE tag. In my case I can’t avoid table, because I’m presenting tabular data from database and table is the only normal solution. The problem is that if I use PRE tag, then long texts make the table kilometers wide, while if the text could wrap, then it’d fit desired window sizes.
If you have any idea how to solve this problem, then please post it here.
Hilarion: I’ll play around with this some and see if I can come up with a solution for your situation. Have you tried some of the code posted by other people in the comments?
Tyler: Yes, I tried all of those and some other code found in the web, but still nothing. I even tried pre-formating text without using PRE tag (with CSS “white-space: pre;”), but got same results (wrapping works outside tables, but does not work inside them).
Hilarion it works if you set a
Widthproperty on thePREtag. It won’t automatically wrap the contents according to the width of the parenttable/tr/tdhmm… I didn’t realize Tyler styled his code tags all crazy :)
repeat:
“Hilarion it works if you set a Width property on the PRE tag. It won’t automatically wrap the contents according to the width of the parent table/tr/td”
kabari: I tried your suggestion, but the result is quite strange. The text inside PRE tag gets wrapped to the specified width, but the table cell stays as wide as if the text was not wrapped (to be precise it’s just a little bit narrower than without wrapping - about one character width difference). This means that I still have the problem with my table being “kilometers” wide.
PS.: I’m doing my tests with IE7.
PPS.: My previous comment to kabari’s comment got lost somehow (maybe because I posted it from different computer), so I’m repeating my thanks to kabari for his (or hers) suggestions.
Everyone, if you’re having problems with the CSS I posted, try this instead:
Setting the width to 99% seems to work really well. When width is set to 100%, there’ll be a horizontal scrollbar in IE7, and we don’t want that sorta stuff happening. I have tested the above code in IE6, IE7, and FireFox 2.0.0.2 and it all seems to work perfectly.
If you use this updated code, please let me know if it works for you or not.
hilarion, I had the same problem but found a solution:
add
to your table tag. I hope it helps you, it helped me….soi got this now as CSS (so you’ll need to add width to pre):
and as HTML:
uhm my HTML post got fucked up: should have used code instead of B-quote….
i hope you understand it now hilarion… good luck there is a solution so keep trying!…..
The css work under the IE6/Firefoxs, but it won’t work under ie7;
best regards
charlie
I have the same problem as Charlie. Works fine in Firefox not in IE7 though. Scrolls for ages horizontally. I am using percentage widths to set up table widths.
Any ideas?
See at
It works for me.
Trick is with and styles
sorry wrong link
see this
Here is another fix: If the PRE tag is inside the table cell it will not work properly. In order for thaat to work you need to wrap it in UL >LI element
so you would have
TABLE > UL> LI> >PRE
Works in IE and FF haven’t check others.
Cool! Thanks for the tip Greg!
This is excellent work.
Its not working for Firefox 2.0.. Any suggestion??
Thankyou infinitely blaatschaap! I had the related problem of a pre inside a table which bluntly refused to reduce its width and use a scrollbar within IE. Using “table-layout: fixed;” on my table has fixed it. And allows me to use an imaginatively titled class expressing my hatred of CSS for my tables :D
Just a quick thanks from me too: with both the table-layout and white-space/word-wrap styles, the problem is fixed for me too!
Shame that browsers don’t set the default <pre>..</pre> style to word wrap.. who wants endless horizontal scrolling of lines?
Thanks to everyone who has responded to this post. I finally got my PRE tag to wrap in FF (2.0.0.4), IE6, and IE7. My code is a little different than what is posted above:
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 */
}
Since there is a container table used (I know, I know. It’s pains me to say it and it will be removed eventually.), I added the
table-layout: fixed;and a width of 100% to it and now it works. This was only to get it working in IE6 and IE7. Firefox worked fine with only the styles above.Also, I didn’t set a width on the PRE tag itself; that only seemed to make things worse for me. I’m not sure why it behaves differently when contained in a td but it does as other people have pointed out. Does anyone know why? Is it part of the W3C spec?
Hi i tried the above combinations but was not able to get it to work in IE6, please help thank u.
The code details are as under
pre {
white-space: pre-wrap;
white-space:-moz-pre-wrap !important;
word-wrap: break-word;
_white-space: pre;
width: 95%;
}
html code is
Regards,
Purav.
Tyler/everyone, first off, I’m not really familiar with codes, but I’m trying to learn doing it as a hobby. I tried to implement what you said, including the updated code, but it just didn;t work. Maybe I did something wrong, and I would greatly appreciate any help. I tried to use it here:
http://www.attyatwork.com/up-centennial-1908-2008/
Thank you and more power.
thanx a lot.. u hv almost saved me
here is an easy solution w/o using table-layout: fixed:
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+ */
white-space : normal;
}
i just added white-space:normal
Thanks for the tips. I’m now utilising the table-layout: fixed; style rule on a nested pre tag. However, there was one caveat I had to work around.
My table had a simple two-column structure. In IE7, the table-layout: fixed rule made the two columns an equal width, even though the second cell had width=”100%” set on it. It worked fine in FF.
In the end I simply added a nested table in the cell I needed the pre tag to work and applied the fixed stype rule to that table only, leaving the outer table alone. This still works in FF.
...
Description
...
Worked great on IE & Firefox. Thanks !!! Finally
Good script! I worked.
However, it is not a valid CSS. I tested it in
Is there other work arounds to display text as the tag does without using the tag itself?
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 */
its not working in Firebix
Thank you. I have the same problem css pre text wrap with latest firefox in ubuntu, as this was working well before in former firefox…, same linux. But on all the code you gave for the pre wrap: it is working fine in my Opera here, but in Firefox: nothing. I will try again…, but so far in FF: no result but “backwarded”… (horrible)
Hi all,
I have a problem it goes like this,
In my application i am displaying a url, In I.E it is getting wrapped when adding <> in td, but this is not working in mozilla.
Can anyone help me, I have to wrap the URL in mozilla also it is looking weird without wrapping.
Your response is highly appreciatedd.
sorry in td if i add WORD-BREAK:BREAK-ALL it is working in IE but not in mozilla
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
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?
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.
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!