当我在 IE 中使用 text-overflow: ellipsis;
时,我遇到了两个长单词的问题:
在 Chrome 中它看起来像:
firstlongword1...
secondlongword2...
在 IE 中:
firstlongword1...
secondlongword2 //word cropped, but dots not present
HTML 和 CSS:
.orange {
color: #f58026;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
<span class="orange" title="12 12">first_verylongworddddddddddddddddddddddddddddddddddddddddddd second_verylonglonglonglonglonglonglonglonglonglong</span>
如果有人遇到问题,请帮忙。 或者请告诉我是否存在其他修复方法。
最佳答案
检查 CSS 规范,Chrome(和 Firefox)似乎正确显示了省略号,IE 似乎落后于曲线。转到 http://www.w3.org/TR/css3-ui/#text-overflow0并向下滚动到 Example 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 fiddle : http://jsfiddle.net/fL6za37f/2/
关于internet-explorer - 文本溢出 : ellipsis in IE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26115421/