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.
Leave a Reply