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

  • Pingback: Labnotes » Rounded Corners - 35

  • http://www.threedozen.com/ Kabari

    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

  • Pingback: Evita las lineas largas cuando escribas codigo usando CSS. » BlogMundi

  • Pingback: Wrapping Text Inside PRE HTML Tags « Lorelle on WordPress

  • Pingback: Die Krux mit Code-Blöcken und pre-Elementen auf Webseiten — Software Guide

  • http://longren.org Tyler

    Glad I could help Kabari. No sense missing some good TV to do what others already have. :)

  • http://www.google.com/ Tom

    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.

  • http://www.TommyImages.com Tommy

    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?

  • http://kryzakonline.com BillyK

    i get the same error in some instances where the last few words in the first line are repeated.. odd.

  • Ani

    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

  • http://www.ardamis.com/ ardamis

    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

  • http://tiik.com tiik

    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

  • http://longren.org Tyler

    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.

  • Prawin

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

  • Hilarion

    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.

  • http://longren.org Tyler

    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?

  • Hilarion

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

  • http://www.threedozen.com/ kabari

    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

  • http://www.threedozen.com/ kabari

    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”

  • Hilarion

    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.

  • Pingback: The WP Themes » Blog Archive » Wrapping Text Inside Pre Tags

  • Pingback: Ausreden : Blog Archive : pre mit Zeilenumbruch in WordPress nutzen

  • http://longren.org Tyler

    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.

  • http://www.blaatschaaaap.blaaa blaatschaap

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

  • http://www.blaatschaaaap.blaaa blaatschaap

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

  • http://www.8opus.com.au/ Charlie

    The css work under the IE6/Firefoxs, but it won’t work under ie7;

    best regards

    charlie

  • oliver

    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?

  • TsS
  • TsS

    sorry wrong link
    see this

  • http://www.trucoder.com Greg Bugaj

    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.

  • http://longren.org Tyler

    Cool! Thanks for the tip Greg!

  • GuyInArgetina

    This is excellent work.

  • http://www.xaprio.com Sunnie

    Its not working for Firefox 2.0.. Any suggestion??

  • http://wogone.com Iain

    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

  • Mike O’Connor

    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?

  • Shawn Roser

    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?

  • Pingback: Weblog Tools Collection » Blog Archive » CSS for code: Wrap long lines

  • Pingback: CSS Hack Wraps Long Text In Pre Tag » Walker News

  • Pingback: CSS for code: Wrap long lines - Travel Directions

  • Pingback: Wrapping Text and Reading Books — Mental Shrapnel

  • Purav

    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.

  • http://www.attyatwork.com Fred

    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.

  • http://www.suppie.org suppie

    thanx a lot.. u hv almost saved me

  • http://no Deng Zhi

    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

  • http://www.copeohs.com Alec

    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

    ...

  • http://www.aparnaanand.com Anand

    Worked great on IE & Firefox. Thanks !!! Finally

  • http://ontheprocess.com Wadworth Waxstrong

    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?

  • Velmurugan

    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

  • Amen

    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)

  • beck

    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.

  • beck

    sorry in td if i add WORD-BREAK:BREAK-ALL it is working in IE but not in mozilla

  • Pingback: <ё> YoYurec Field </ё> » Blog Archive » Перенос слов в теге PRE

  • Pingback: Internet Explorer » Wrapping Text Inside Pre Tags at T. Longren

  • vino

    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

  • Pingback: Can Live » Blog Archive » HTML CSS Trick for Displaying Code Snippets: Wrap Long Lines with PRE Tag

  • Resh

    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?

  • Chas

    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.

  • Pingback: HTML CSS Trick for Displaying Code Snippets: Wrap Long Lines with PRE Tag | Etixet

  • Danny

    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!

  • Pingback: Jacob Repp » Blog Archive » Blog Style Update

  • Josep M.

    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.

  • piyush

    not working in ff. Is there any solution to this?

  • Markku Laine

    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.

  • Markku Laine

    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.

    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.

  • Pingback: Bissinger’s Blog» Blogarchiv » Zeilenumbruch im -Tag

  • http://delhi.com.co.in Sunny Khetarpal

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

  • Rakesh

    I have tried all this but nothing works

  • Pingback: Adding Print Capability to your Site with CSS

  • Pingback: Riflusso del testo con l’elemento pre - ReFactor.it

  • Patt

    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!

  • sanjay

    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.

  • http://blog.webunusual.com Amre Ellafi

    work like a charm ! excellent :)

    to use it with shjs code highlighter embed this css into pre.sh_sourceCode .

  • Astha

    HI

    The text embedded inside the pre text starts from the middle of the page. How can it be corrected. Please help

  • Pingback: How to wrap text inside <pre> tags in all browsers - Serge B. Blog

  • http://www.conciselogic.com Buddy

    Works great! Got me out of a jamb. Thanks to you all.

  • http://nesthus.net TN

    Thanks for this, exactly what I needed and it fixed my problem. :)

  • http://www.SohTanaka.com Soh Tanaka

    You are probably God. Thank you I was pickin my brain at this for quite some time!

  • La Bala De Plata

    Thank you!

  • Lloyd Borrett

    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

  • Pingback: Using Print Stylesheets Effectively « Night Prayer

  • http://www.fulltraffic.us FullTraffic

    Thank you for this article. I have the same exact problem with IE and , but this one helps me a lot.

  • Pingback: using REPLACE function to replace a vbCrLf with a <br> tag | keyongtech

  • http://www.ageent.ru ageent

    Very big thanks!

  • Vaibhav Karkhanis

    Thanks a lot …this resolved our problem

  • Pingback: Wrapping Texts Inside Tags « Nicnacks’s Weblog

  • http://www.gurufocus.com Charlie

    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.

  • Pingback: Zeilenumbruch auch ohne Leerzeichen erzwingen « WebDevTeam’s Blog

  • http://www.prasnah.com VN

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

    htp://www.prasnah.com

  • Pingback: New Theme Preview - Seanooi | Seanooi

  • http://neyroreanimatologia.ru Xray

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

  • Yogi

    Thanks for the post. The width field solved my problem :-)

  • Max

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

    • Selina

      Thanks for the very last line! It was most definitely crucial in getting the line to break in IE6.

  • Pingback: 50 New CSS Techniques For Your Next Web Design « Tech7.Net

  • Pingback: 50 New CSS Techniques For Your Next Web Design | Desinine

  • http://sanjaykkhanna.wordpress.com/ Sanjay

    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%;
    }

    • http://sanjaykkhanna.wordpress.com/ Sanjay

      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.

      • http://sanjaykkhanna.wordpress.com/ Sanjay

        table border=”0″ style=”table-layout:fixed;WORD-BREAK:BREAK-ALL;”
        tr
        td/pre/your text/../pre/…/td
        /tr
        /table

  • http://sanjaykkhanna.wordpress.com/ Sanjay

    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.

  • Pingback: 50 New CSS Techniques For Your Next Web Design « Photoshop.vn – Your Design Resource

  • Pingback: SyntaxHighlighter e Windows Live Writer » Blog » DreamsInCode

  • Pingback: 50 New CSS Techniques For Your Next Web Design « Smashing Magazine

  • Pingback: Wrapping Text Inside pre Tags « kohmuro.com

  • Pingback: 50 New CSS Techniques For Your Next Web Design | Theme Center

  • Pingback: Word wrap inside <pre></pre> block

  • Pingback: 50 New CSS Techniques For Your Next Web Design « SUMERA’S Weblog

  • Richa

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

  • Pingback: Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine

  • Pingback: Modern CSS Layouts, Part 2: The Essential Techniques | i know idea

  • Pingback: Modern CSS Layouts, Part 2: The Essential Techniques | Web Design Cool

  • Pingback: Modern CSS Layouts, Part 2: The Essential Techniques | webdunyam.net

  • Pingback: Modern CSS Layouts, Part 2: The Essential Techniques « 完美WP

  • Pingback: Modern CSS Layouts, Part 2: The Essential Techniques | Designer Net

  • Pingback: UT Web Developers | Blog | Usability & CSS3

  • Pingback: Modern CSS Layouts, Part 2: The Essential Techniques « Defonic International Solutions

  • Pingback: Modern CSS Layouts, Part 2: The Essential Techniques

  • Pingback: Modern CSS Layouts, Part 2: The Essential Techniques | Best Web Magazine

  • http://www.tutorials007.com/ Bianca Eckard

    Thanks for the tutorial. Will you be posting a fresh CSS tutorial any time soon?

  • http://www.wsiinternetstrategies.cz/ Petr Macek

    Thanks fot the post, I got to it a bit later but still good information in it for me. Thanks again. Petr

  • http://www.mambomart.com Vinodh

    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

  • http://pwnify.com Stephen Young

    You saved me with this! Thanks!

  • http://www.linuxtechie.net Linuxtechie

    Thanks a ton man! Just what I was looking for. Please keep the page updated if you find anything new/additional.

  • Noel

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

  • Pingback: What I’m doing 03/27/2011 « Shingonoide's Blog

  • Alfredo Cavalcanti Segundo

    The most recently code saves my life. Thank you dude!

  • http://www.cashadvancer.com/ B

    jut like Rakesh, I have tried all this but nothing works as well

    • http://tyler.longren.org/ Tyler

      Hi B, can I take a look at what you’re trying to accomplish? Perhaps I can help.

  • http://www.barryfogarty.com/ London Web Designer

    I was looking for a similar technique for building an Umbraco code markup macro – thanks for the useful info!

  • Pingback: HTML : tags <pre> / <code> : comment forcer retour à la ligne | Olivier Pons

  • Pingback: 50 thủ thuật CSS mới | dannguyends

  • http://hahahaw.com HaHaHa

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

  • Nicola

    UPDATE 6/4/2008 worked for me! Thanks a lot! Tested in Firefox, IE, Chrome.

    • http://tyler.longren.org/ Tyler

      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.

  • Pingback: Solved: New Lines “Bug” Passing Textarea Data | Blueglow Technologies

  • Pingback: SQLHack.net » Blog Archive » Template & CSS Changed

  • Sandeep

    it helped me :)

  • Grffhhhh

    Aaargh, remove text markup styles plz, I lost few minutes for the paint the text

    • http://www.longren.org/ Tyler

      Not sure I follow. Can you elaborate?

  • http://www.thedesignguys.co.uk Richie From The Design Guys

    Thanks! Helped me a bunch – I was going through “scrolling hell” before I found you;) Have a great day!

  • Pingback: Kick-Start Your Project: A Collection of Handy CSS Snippets | WebGrafis

  • Pingback: WordPress | Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

  • wp web design

    This site and this post very help full for all visitor any can get help by read this content and site.
    get more wp web design site.