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.

...

Now, you need to over-ride some pretty ugly default presentation styles:


form button {padding:0; margin:0; border:none; background:0;}


This works fine and dandy until you get to IE6. The buttons tend to get really large with IE. So, you need to re-define the width of the buttons and apply overflow:visible. Here’s the entry in your IE6.css file:

form button {width:1%; overflow:visible;}


Resources

Special thanks to Jehiah Czebotar for saving me a bunch of time trying to figure this out.