文本溢出：IE 中的省略号

Question

当我text-overflow: ellipsis;在 IE 中使用时，我遇到了两个长词的问题：

在 Chrome 中，它看起来像：

第一个长字1...

第二个长字2...

在 IE 中：

第一个长字1...

secondlongword2 //单词被裁剪，但点不存在

HTML 和 CSS：

.orange {
    color: #f58026;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

<span class="orange" title="12 12">first_verylongworddddddddddddddddddddddddddddddddddddddddddd second_verylonglonglonglonglonglonglonglonglonglong</span>

如果有人遇到问题，请帮助。或者请告诉我是否存在其他方法来修复它。

Answer 1

检查 CSS 规范，Chrome（和 Firefox）似乎正确显示省略号，而 IE 似乎落后于曲线。转到http://www.w3.org/TR/css3-ui/#text-overflow0并向下滚动到示例 9以查看如何text-overflow:ellipsis;呈现的演示。

因此，在 IE 中获得类似结果的唯一方法似乎是将单词包装在它们自己的元素中：

.orange {
    color: #f58026;
    display: block;
    text-overflow: ellipsis;
}
.orange span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

<span class="orange" title="12 12">
    <span>first_verylongworddddddddddddddddddddddddddddddddddddddddddd</span> 
    <span>second_verylonglonglonglonglonglonglonglonglonglong</span>
</span>

JS 小提琴： http://jsfiddle.net/fL6za37f/2/