Cannot get ellipsis on a 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 I want to get an ellipsis over the text inside the innermost span. I cannot get the ellipsis on IE9 and IE8. Its works fine in Fire Fox. I tried removing span and using div instead , but it did not help. Please let me know if I am missing out anything. All help is appreciated. Thank you.

I also used [white-space, text-overflow and overflow properties on the inner span with class "xyz1"], it did not help — Rahul, Nov 06 '12 at 19:31

Daedalus · Answer 1 · 2012-11-06T22:49:29.410

8

As far as I can tell, 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

edited Nov 06 '12 at 22:49

answered Nov 06 '12 at 22:09

Daedalus

7,586
5
36
61

MDN mentioned not to use `-ms-text-overflow`. please check this [**link**](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow?redirectlocale=en-US&redirectslug=CSS%2Ftext-overflow#Internet_Explorer_notes). I am not sure why they mentioned not to use it though. – Mr_Green May 11 '13 at 05:55
2

@Mr_Green As stated, I am going by the Microsoft developer article. Though I don't really.. understand why it was brought up, if a reason is not even given by the article. One does not just stop doing something because another party says not to do it, and foregoes giving a reason. I would usually fall to the knowledge of the people who created the browser, versus an outside party.. no matter how correct the outside party is on such quirks. The moment they provide a reason, I may change this answer, but I don't see a reason to really do so yet. – Daedalus May 11 '13 at 06:43

Chris Tauff · Answer 2 · 2012-11-08T15:01:50.303

4

white-space: nowrap; is the key here, the article quoted by Daedalus actually doesn't even use that class property value in its own code example.

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

edited Nov 08 '12 at 15:01

answered Nov 07 '12 at 14:10

Chris Tauff

41
3

score 4 · Answer 3 · answered Dec 22 '13 at 14:05

4

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

answered Dec 22 '13 at 14:05

seyelent

119
2
7

1

This is the only answer that worked for me. You need to have all four: `white-space`, `overflow`, `text-overflow` and `work-wrap` defined as above. In my case I was missing `word-wrap: normal;` and as soon as I added this it's now workin – Martin Suchanek Mar 22 '14 at 00:51

score 2 · Answer 4 · answered Mar 19 '13 at 13:07

2

Even those two other answers are correct, there is however a problem with it if you're using custom fonts, eg. Google WebFonts.

Demo with IE8 rendering ellipsis wrong with custom fonts:
http://jsbin.com/odiqux/1

answered Mar 19 '13 at 13:07

micadelli

2,482
6
26
38

I'm using a custom font (Google Open Sans) and have it working, with @seyelent's answer below. – Martin Suchanek Mar 22 '14 at 00:51

score 0 · Answer 5 · answered Jul 10 '15 at 12:04

@micadelli, I had a similar problem with IE9 where I had a web-font based icon before the text that should have been rendered with ellipsis.

The solution was to add this to the class:

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

See also this issues on Font-Awesome and Bootstrap:

Cannot get ellipsis on a link text in IE9 and IE8

5 Answers5

Linked