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?

Wordwrap


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 thoughts on “Word wrapping for Internet Explorer”

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

  2. 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 ;
    }
    }​​

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

    Regards,
    Zuhair Naqvi

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

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

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

Leave a Reply

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