Word wrapping for Internet Explorer

One of the @media seminars this year prompted me to ask a question to the Europeans about forcing text-wrapping on really long words. We’ve been having a problem on Yahoo! Tech with people pasting urls into their comments, questions, and reviews. These long urls want to extend past the containers and we have had to set a width to the container and overflow:hidden to hide what is too long. How, I asked, do they handle translations with really long words?

Krzysztof Szafranek caught up with me later and told me about the IE-only CSS rules that allow this. I had a bug come up on one of our pages in IE and so I got in touch with him recently for that bit of advice again. It’s pretty simple, you can define in your IE6.css file to either wrap these words or truncate and add an ellipses. These are proprietary, so they won’t work in other browsers and may cause validation errors. But that’s what your ie6.css and ie7.css style sheets are for anyways, right?


div.IEwrap {
border: 1px solid red;
margin: 10px;
width: 50px;
overflow: hidden;
#break {
word-break: break-all;

Truncate the word

div.IEwrap {
border: 1px solid red;
margin: 10px;
width: 50px;
overflow: hidden;
#ellipsis {
text-overflow: ellipsis;

Big thanks to Krzysztof Szafranek for pointing this out and sending me the sample code.



, , ,




12 responses to “Word wrapping for Internet Explorer”

  1. Bryan Avatar


    You don’t understand how good finding that break-all really is.

    Thank you so much!


  2. Seth Cole Avatar

    Oh my god, thanks for saving my day! Seriously. I am not sure why this was so hard to find but I nearly Googled myself silly looking for this break. Whew.

    Rock on!

  3. Jach Avatar

    I’d like to say that I cannot find any working CSS word-wrap for Firefox, and it makes me wonder why the haven’t implemented it correctly/at all. It made me write this PHP hack to make it work, which could probably be made into JavaScript with ease as there aren’t any PHP-specific functions there. (Unless of course JavaScript doesn’t like the $var{$key} syntax, in which case good luck.)

    $off = 0;
    for ($key = 0; isse​t($c{$key}); $key ) {

    if ($keye.0 == 0 && $​key != 0) {
    $c = substr($c, 0, $key ($off*7)) . ‘&#820​3;’ .
    substr($c, $key ($off*7), strlen($c)-1);
    $off ;

  4. Will Avatar

    Try this for moz/firefox word-wrap:
    .className {
    white-space: inherit;

  5. sanjay Avatar

    it’s not working on mozila.


  6. Zuhair Naqvi Avatar

    Hello All,

    The only thing is working on IE is “word-break: break-all;” and rest all the things are not working on any browser.

    but the problem is still same:

    How we can make the a long word breakable in all browsers?

    Please reply…….

    Zuhair Naqvi

  7. PeterGreve Avatar

    Awesome and it works in IE6 aswell… thanks for posting this!!

    I used the following and it worked in IE6, IE7, Safari and FF3

    .body {
    overflow: hidden;
    white-space: normal;
    word-break: break-all;

  8. Naveed Avatar

    Thanks a lot PeterGreve, I was going to write some php script to resolve this issue but this worked for me as well.

    .body {
    overflow: hidden;
    white-space: normal;
    word-break: break-all;

    Really appreciate your effort… 🙂

  9. Arun Avatar

    fix width for parent ele thats it. 🙂 enjoy

  10. OsamaBinLogin Avatar

    good. For my purposes, though, white-space normal compresses consecutive spaces. I wanted to preserve consecutive spaces, and do a pre tag, but with word wrapping.

    In Safari, white-space: pre-wrap does this just right.

    in IE7, that doesn’t wrap. Instead I used white-space:normal, which compresses consecutive spaces. Wish there was a better way.

  11. Richard Avatar

    Thanks so much for posting this… massive time saver! 🙂

  12. pree Avatar

    anythin for IE9?

Leave a Reply

Your email address will not be published. Required fields are marked *