无法在IE9和IE8中的链接文本上获取省略号 [英] 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 //

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

我的问题是我想在最内层的文本中得到省略号。我不能得到在IE9和IE8的省略号。它的工作很好在火狐。我试图删除跨度和使用div，但它没有帮助。请让我知道，如果我错过了什么。所有的帮助是赞赏。谢谢。

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.

推荐答案

据我所知，阅读 msdn有关 text-overflow 的文章，您需要使用 -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

这篇关于无法在IE9和IE8中的链接文本上获取省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！