in Internet

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:

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:


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.

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.

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:

Where to now?

Work with Me

I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!

Leave some Feedback

Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. :)

Enter your email address to subscribe and receive notifications of new posts by email.

Leave a Comment

Comment

92 Comments

  1. 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

  2. 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.

  3. 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?

  4. 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

  5. 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

  6. 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

  7. 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.

  8. 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 :(

  9. 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.

  10. 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?

  11. 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).

  12. hmm… 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”

  13. 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.

  14. 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.

  15. hilarion, I had the same problem but found a solution:
    add

    style=”table-layout: fixed;”

    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):

    pre {
    width: 490;
    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 */
    font-family: verdana; font-size : 11;
    }

    and as HTML:

    text….

  16. 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?

  17. 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.

  18. 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

  19. 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?

  20. 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?

  21. 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

    Aishwarya Diamonds : THis email is from Tejas Jewellers, contacted us thorugh GOA show.

    Dear Sirs

    It is with immense pleasure I wish to introduce myself being the Manager of M/s. ….. My Managing Director ¿ Mr. S ¿ had a fruitful visit to the glorious “SHOW 07 ” held at …..He briefed me all about the excellent perfromance of the Show and the tremendous support afforded, throughout the show time, to the guests from various parts.

    We would like to express our deepest appreciation and most notably as you all continue to build a new dimension in such Shows, we look forward for much more exciting ahead.

    Rgds
    CS –
    MANAGER

    Regards,
    Purav.

  22. 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.

  23. 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

  24. 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

    ...

  25. 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

  26. 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)

  27. 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.

  28. 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

  29. 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?

  30. 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.

  31. 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!

  32. 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.

  33. 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.

  34. 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.

  35. 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.

  36. 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!

  37. 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.

  38. 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

  39. Thanks guys, IE 7 was not formatting the pre text as expected, the above tip & discussion helped a lot.

    htp://www.prasnah.com

  40. Однажлы в студеную зимнию пору. Бродил Я по нету. Наткнулся на пост. Понравилось очень! Респект выражаю! И даже закладки себе добавляю!

  41. @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? */

  42. 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.

  43. 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.

  44. .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..

  45. 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

  46. 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!)

    • 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.