« How to rebuild a site with standards - ala iconfactory
The big list of fixed stuff in IE7 »

Word wrapping for Internet Explorer

Published 2 years, 3 months ago in CSS, IE7, atmedia and overflow Digg This

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

  1. div.IEwrap {
  2. border: 1px solid red;
  3. margin: 10px;
  4. width: 50px;
  5. overflow: hidden;
  6. }
  7. #break {
  8. word-break: break-all;
  9. }

Truncate the word

  1. div.IEwrap {
  2. border: 1px solid red;
  3. margin: 10px;
  4. width: 50px;
  5. overflow: hidden;
  6. }
  7. #ellipsis {
  8. text-overflow: ellipsis;
  9. }

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

5 Responses to “Word wrapping for Internet Explorer”  

Feed for this Entry Trackback Address
  1. 1 Bryan Aug 29th, 2006 at 6:55 am

    SWEET!

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

    Thank you so much!

    Bryan

  2. 2 Seth Cole May 24th, 2007 at 6:57 am

    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. 3 Jach Jun 29th, 2007 at 12:42 am

    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. 4 Will Jul 10th, 2007 at 8:48 am

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

  5. 5 sanjay Sep 6th, 2007 at 4:42 am

    it’s not working on mozila.

    thanks
    sanjay

Leave a Reply