CODEWITHSUNDEEP
htmlcssdom
Rahul
Rahul

Reputation: 1579

Cannot get ellipsis on a link text in IE9 and IE8

<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.

Upvotes: 6

Views: 11879

Answers (5)

martinoss
martinoss

Reputation: 5458

@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:

Upvotes: 0

seyelent
seyelent

Reputation: 119

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

Upvotes: 4

micadelli
micadelli

Reputation: 2482

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

Upvotes: 2

Chris Tauff
Chris Tauff

Reputation: 41

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

Upvotes: 4

Daedalus
Daedalus

Reputation: 7722

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

Upvotes: 8

Related Questions