Unable to get ellipsis in link text in IE9 and IE8

Question

<div class="jspPane" style="padding: 0px; top: 0px; width: 138px;"> <ul style="display: block;"> <li class="hyperlink" > <span class="xyz1" style="background-image:url(/Content/images/icon_link_16x7.png);"> View on Bing Maps website</span> </li> </ul> </div> 

//// class //

  ul li { color: #137AFF; height: 25px; overflow: hidden; padding-left: 5px; padding-right: 4px; padding-top: 4px; text-align: left; text-overflow: ellipsis; width: 138px; } .hyperlink { color: #13A3F7; font-size: 12px !important; text-decoration: underline; white-space: nowrap; } 

My problem is that I want to get ellipsis over text inside the innermost range. I cannot get ellipses on IE9 and IE8. His work is beautiful in Fire Fox. I tried to remove the span and use the div instead, but that didn't help. Please let me know if I miss anything. All help is appreciated. Thanks.

Answer 1

As far as I can tell by reading the msdn developer article regarding text-overflow , you need to use -ms-text-overflow :

 ul li { color: #137AFF; height: 25px; overflow: hidden; padding-left: 5px; padding-right: 4px; padding-top: 4px; text-align: left; text-overflow: ellipsis; -ms-text-overflow: ellipsis; width: 138px; /* note that this width will have to be smaller to see the effect */ } 

Demo

Answer 2

white-space: nowrap; is the key here, the article cited by Daedalus does not actually even use the value of this class property in its own sample code .

 ul li { color: #137AFF; height: 25px; overflow: hidden; padding-left: 5px; padding-right: 4px; padding-top: 4px; text-align: left; width: 138px; text-overflow: ellipsis; **white-space:nowrap;** } 

Working example

Answer 3

These are my settings and they work:

  .node-title { width: 90%; font-size: 95%; color: #4d4d4d; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; word-wrap: normal !important; } 

Answer 4

Even those two other answers are correct, however there is a problem with it if you use custom fonts , for example. Google WebFonts

Demo with IE8 rendering ellipsing incorrectly with custom fonts:
http://jsbin.com/odiqux/1

Answer 5

@micadelli, I had a similar problem with IE9, where I had a web font based icon in front of the text that should have been displayed with ellipses.

The solution was to add this to the class:

 .node-title:before { content: ''; } 

See also these issues on Font-Awesome and Bootstrap :