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

////班级 //

 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 上得到省略号。它在火狐中运行良好。我尝试删除 span 并改用 div ，但没有帮助。如果我遗漏了什么，请告诉我。感谢所有帮助。谢谢你。

4

5 回答 5

8

据我所知，阅读有关的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 */
}

演示

于 2012-11-06T22:09:43.723 回答
4

这些是我的设置，它们有效：

    .node-title {
        width: 90%;
        font-size: 95%; 
        color: #4d4d4d; 
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: normal !important;
    }
于 2013-12-22T14:05:13.740 回答
4

空白：nowrap；是这里的关键，Daedalus 引用的文章实际上甚至没有在自己的代码示例中使用该类属性值。

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

工作示例

于 2012-11-07T14:10:02.277 回答
2

即使这两个其他答案是正确的，但是如果您使用自定义字体，它就会出现问题，例如。谷歌网络字体。

使用 IE8 渲染省略号的演示与自定义字体错误：http:
//jsbin.com/odiqux/1

于 2013-03-19T13:07:26.330 回答
0

@micadelli，我在 IE9 上遇到了类似的问题，我在应该用省略号呈现的文本之前有一个基于 Web 字体的图标。

解决方案是将其添加到类中：

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

另请参阅Font-Awesome和Bootstrap上的此问题：

于 2015-07-10T12:04:00.680 回答