Grow your CSS skills. Land your dream job.

Last updated on:

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

    doesn’t work in Opera 10 and IE8

  3. Demo links seem to be broken for this article.

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

    • 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. Ashok
    Permalink to comment#

    Please Give me example Sites

  6. 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. jayesh
    Permalink to comment#

    thank you

  8. 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;
    }
    
    • Lore
      Permalink to comment#

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

          border: 12px solid transparent;
      
    • 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

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

  10. 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. 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. Hi, this solution does not work in internet explorer 10

  13. 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. Sudheep Divakar
    Permalink to comment#

    Thank you Marco. It worked.

  15. Christina
    Permalink to comment#

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

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

  16. 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. Sriniwas
    Permalink to comment#

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

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

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

      ^+1

      word-break: keep-all;

      This worked like a charm, thanks!

  19. 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. Aidan
    Permalink to comment#

    Marco.. you’re a genius!

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".