The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Make “Pre” Text Wrap

Last updated on:

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


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

    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;

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

    Please Give me example Sites

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

    thank you

  8. 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 {
     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
      property without prefix

  9. 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+ */


    • Kelly

      ^ +1

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

    • Tim
      Permalink to comment#

      Thank you, Marco! Works brilliantly!

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

    • Sabari

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

  10. 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. 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. Sergio Vitali
    Permalink to comment#

    Hi, this solution does not work in internet explorer 10

  13. Nenad Marjanovic
    Permalink to comment#


    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.

    • Mike Kelly
      Permalink to comment#

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

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

  17. Sriniwas
    Permalink to comment#

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

  18. 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;
    • Italiatina
      Permalink to comment#


      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


  22. 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. dwhyte
    Permalink to comment#

    Thanks, this was a lifesaver

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed