Make “Pre” Text Wrap

Text in <pre> tags doesn't wrap by default. For example, see the code snippet below! If this is causing layout problems, one solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.

/* Browser specific (not valid) styles to make preformatted text wrap */		

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+ */
}

Comments

  1. User Avatar
    Chad Ostrowski
    Permalink to comment#

    So, does o-pre-wrap work in Opera 8, 9, and 10 as well?

    And what of web-kit browsers? (I sincerely hope they support the CSS3 declaration itself.)

    After all the Google searching I feel like doing, this solution is the only one that pops up anywhere. It seems rather outdated…

  2. User Avatar
    aaaaa

    doesn’t work in Opera 10 and IE8

  3. User Avatar
    Kzqai
    Permalink to comment#

    Demo links seem to be broken for this article.

  4. User Avatar
    chathu
    Permalink to comment#

    wow it work fiend. Thank a lot. I only added following two codes but it work. Is it OK?

    white-space: pre-wrap;
    word-wrap: break-word;

    • User Avatar
      Larry Levenson
      Permalink to comment#

      I used these same two lines, Chathu. Works like magic, huh! I used it to automatically wrap the text of a submit button. Neat solution!! Thanks, Chris!

  5. User Avatar
    Ashok
    Permalink to comment#

    Please Give me example Sites

  6. User Avatar
    Jeff Lambert
    Permalink to comment#

    Awesome! Was going nuts on a new responsive theme I was building. Couldn’t figure out why the content wasn’t compressing on some pages like it was on other pages. Finally figured out it was the <pre><code> wrapped content I had included. Figured I was going to have to enter the content in such a fashion as to keep it from extending or do an overflow hidden but your solution worked like a charm! Thanks for the share.

  7. User Avatar
    jayesh
    Permalink to comment#

    thank you

  8. User Avatar
    Lore
    Permalink to comment#

    This worked, but Firefox was still bugging on PRE, because my box model wasn’t being inherited. FF with padding in the PRE block causes the page to scroll horizontally, even with overflow hidden. Fix below:

    pre, code {
     padding:30px;
     box-sizing:border-box;
     -moz-box-sizing:border-box;
     webkit-box-sizing:border-box;
     display:block; 
     white-space: pre-wrap;  
     white-space: -moz-pre-wrap; 
     white-space: -pre-wrap; 
     white-space: -o-pre-wrap; 
     word-wrap: break-word; 
     width:100%; overflow-x:auto;
    }
    
    • User Avatar
      Lore
      Permalink to comment#

      PS – If still having issues, try replacing the padding with something like:

          border: 12px solid transparent;
      
    • User Avatar
      Osama
      Permalink to comment#

      Your Webkit Code Dont Have (( – )) It Must Be

      -webkit- Instead Of webkit

      And Please Add The Webkit First Then Mozilla Then The Rest Of Other Codes
      -webkit-
      -moz-
      property without prefix

    • User Avatar
      soundar
      Permalink to comment#

      Lore ,

            Thanks for your helping, i solved my problem by using pre-wrap;
      
  9. User Avatar
    Marco

    I think this one is more bulletproof

    pre {
    word-break: break-all; /* webkit /
    word-wrap: break-word;
    white-space: pre;
    white-space: -moz-pre-wrap; /
    fennec /
    white-space: pre-wrap;
    white-space: pre\9; /
    IE7+ */
    }

    demo http://jsbin.com/bulletproof-responsive-pre/2/edit

    • User Avatar
      Kelly

      ^ +1

      I was struggling to get the pre to wrap and not break the width of a responsive site. Marco’s solution works.

    • User Avatar
      Tim
      Permalink to comment#

      Thank you, Marco! Works brilliantly!

    • User Avatar
      Mike Kelly
      Permalink to comment#

      the problem is that it doesn’t break at words or punctuation like the real code next to it but at individual letters. any workaround for that? THANKS!

    • User Avatar
      Sabari

      Fantastic Marco! I was struggling a lot, finally your solution works for me

  10. User Avatar
    Tabitha
    Permalink to comment#

    Thank you for this. I had been hitting my head against my desk since yesterday. Made my day :). It’s the little things you know….

  11. User Avatar
    rishabh jain
    Permalink to comment#

    can any one help me ,,i have some code of html and java ,, i want to store it in my database so that i can further use it to display the required file ,what format should i use to send it to database

  12. User Avatar
    Sergio Vitali
    Permalink to comment#

    Hi, this solution does not work in internet explorer 10

  13. User Avatar
    Nenad Marjanovic
    Permalink to comment#

    Hi,

    This was good solution for my blog because i write a lot of terminal Linux commands and i use pre to make things to look better.

    Thank you !

  14. User Avatar
    Sudheep Divakar
    Permalink to comment#

    Thank you Marco. It worked.

  15. User Avatar
    Christina
    Permalink to comment#

    is it possible to have it break on words rather than characters?

    • User Avatar
      Christina
      Permalink to comment#

      Never mind I figured out my issue. I was trying to use this on a form button and was having issues with the characters breaking oppose to the words. I used “white-space: normal !important;” and it worked fine.

    • User Avatar
      Mike Kelly
      Permalink to comment#

      same question I have. tried your solution on regular code, Christina. still breaks on characters…

  16. User Avatar
    Jay
    Permalink to comment#

    I’m not really sure what I’d do without this awesome site! Chris, thank you for sharing your super extensive knowledge. I’m just getting started with web development and this is my go-to site for any help I need (and pretty much my last stop since there is always an answer!).

    Thank you.
    Jay

  17. User Avatar
    Sriniwas
    Permalink to comment#

    The code is not working with Opera 10, is there any solution?

  18. User Avatar
    Philip Ashlock

    To prevent words from being broken on the wrap’ing from white-space: pre-wrap; you can also use:

       word-break: keep-all;
    
    • User Avatar
      Italiatina
      Permalink to comment#

      ^+1

      word-break: keep-all;

      This worked like a charm, thanks!

  19. User Avatar
    koolx
    Permalink to comment#

    I got Opera version 12. I have my settings for webpages set to ‘Fit to Width’. But there are certain webpages that I need to turn this feature off on. I got Stylish installed. What code can I use for a specific webpage to ignore ‘Fit to Width’?

  20. User Avatar
    Aidan
    Permalink to comment#

    Marco.. you’re a genius!

  21. User Avatar
    Annali
    Permalink to comment#

    Hi there,

    Thank you for this, it worked great, however, is there a way to style the width of the pre tag (with the word wrap) to automatically size within a table or div?

    I have been struggling with this for days, any help or suggestions will be greatly appreciated

    Thanks

  22. User Avatar
    Gabrielle

    Hi, I’m testing Crayon for highlighting my pre code,
    how can i force plugin to use: word-break: keep-all;
    , and prevent words from being broken ?
    Thanks for adivice, best regards Sparky’s :)

  23. User Avatar
    dwhyte
    Permalink to comment#

    Thanks, this was a lifesaver

  24. User Avatar
    Vlad Gurdiga

    Thank you! Very handy! 8-)

  25. User Avatar
    isakhejnesen
    Permalink to comment#

    Really great, exactly what i was look for. Thank you :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag