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
Thanks! Helped me a bunch – I was going through “scrolling hell” before I found you;) Have a great day!
Aaargh, remove text markup styles plz, I lost few minutes for the paint the text
Not sure I follow. Can you elaborate?
it helped me :)
[...] to http://www.longren.org/wrapping-text-inside-pre-tags/#comment-242412 for the CSS. [...]
[...] Covenant.Child suggested storing information in a MYSQL database with pre tags around it. And Tyler (longren.org) provided a way to style pre tags with [...]
UPDATE 6/4/2008 worked for me! Thanks a lot! Tested in Firefox, IE, Chrome.
Glad it worked for you Nicola!
I need to revamp this post and order the code blocks in a fashion that highlights the code that has worked for the majority of people.
@Soh Tanaka – I’m not sure if Mr. Longren is God LOL, but he certainly ranks up there in my book with this code.
Thank you T.!
[...] This tutorial này chỉ ra cách làm thế nào để wrap text trong pre html tags. Rất hữu ích để hiển thị code trên trang web của bạn, đặc biệt là khi các line của code khá dài và cuối cùng phá vỡ layout trang web của bạn (đặc biệt là trong IE). Hướng dẫn tương đối đơn giản và có một vài options khác được trình bày. [...]
[...] Et voilà, vous pourrez imprimer votre document tranquillement, tout le code sera affiché. Cet article fait suite à une question que j’ai posée sur stackoverflow.com. Cette dernière avait déjà été posée, et la réponse était valide : le lien est ici. Et la solution, carrément à la source, est ici. [...]
I was looking for a similar technique for building an Umbraco code markup macro – thanks for the useful info!
jut like Rakesh, I have tried all this but nothing works as well
Hi B, can I take a look at what you’re trying to accomplish? Perhaps I can help.
The most recently code saves my life. Thank you dude!
[...] Wrapping Text Inside Pre Tags [...]
Max’s example worked for me – the crucial aspect for IE 6 and 7 support seems to be the
white-space: normal;
code. Have tested this in IE NetRenderer and code works as expected in IE 6 and 7 although 5.5 still renders everything as one long line (though 5.5 support is not few and far between these days anyway).
On the Mac side of things, Max’s code has been tested in Firefox 3 and Safari 3.
Thanks Max (and IE NetRenderer too!)
Thanks a ton man! Just what I was looking for. Please keep the page updated if you find anything new/additional.
You saved me with this! Thanks!
The text inside a td wraps more than needed. there are more space still to accommodate the subsequent words but each word comes in next line. this happens only in IE… not in other browsers… please let me know the solution
Thanks fot the post, I got to it a bit later but still good information in it for me. Thanks again. Petr
Thanks for the tutorial. Will you be posting a fresh CSS tutorial any time soon?
[...] [...]
[...] Wrapping Text Inside Pre Tags (using white-space and word-wrap for various browsers, from Unwakeable) [...]
[...] Wrapping Text Inside Pre Tags (using white-space and word-wrap for various browsers, from Unwakeable) [...]
[...] Wrapping Text Inside Pre Tags (using white-space and word-wrap for various browsers, from Unwakeable) [...]
[...] [...]
[...] Wrapping Text Inside Pre Tags (using white-space and word-wrap for various browsers, from Unwakeable) [...]
[...] Wrapping Text Inside Pre Tags (using white-space and word-wrap for various browsers, from Unwakeable) [...]
[...] Wrapping Text Inside Pre Tags (using white-space and word-wrap for various browsers, from Unwakeable) [...]
[...] Wrapping Text Inside Pre Tags (using white-space and word-wrap for various browsers, from Unwakeable) [...]
[...] [...]
.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: 12px; font-family: Courier New, Courier, monospace;
display: inline;
}
This works fine in all the browsers except Opera. I am using version 9 of opera..
[...] 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. [...]
[...] (e.g. the sidebar would be forced below the post) and reducing readability. A solution was found on this site. For my solution, adding the following code to the end of [...]
[...] 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. [...]
[...] to Google to look for a method that might let me wrap long lines of text. The solution I found was here, and I now use this solution when I add code to my articles. I’ve made a small modification [...]