文本溢出：IE中的省略号
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文本溢出：IE中的省略号相关的知识，希望对你有一定的参考价值。
当我在IE中使用text-overflow: ellipsis;时，我遇到了两个长字的问题：
在Chrome中，它看起来像：
firstlongword1 ...
secondlongword2 ...
在IE中：
firstlongword1 ...
secondlongword2 //单词被裁剪，但点不存在
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并向下滚动到例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>另一答案
你必须在橙色类中加入“white-space：nowrap;”
.orange {
color: #f58026;
text-overflow: ellipsis;
display: block;
overflow: hidden;
white-space: nowrap;
}<span class="orange" title="12 12">first_verylongworddddddddddddddddddddddddddddddddddsfgdsdfgdfgsdfhdfhsdfhsdfhdddddddddd second_verylonglonglonglonglonglonglonglonglonglong</span>另一答案
当全局包含元素支持的文本溢出时附加省略号，尽管您可以使用基于容器宽度的jQuery省略号插件http://plugins.jquery.com/ellipsis/或更低版本（很久以前得到它，所以忘记源）：
$.fn.ellipsis = function(){
return this.each(function() {
var el = $(this);`
if(el.css("overflow") == "hidden"){
var text = el.html();
var multiline = el.hasClass('multiline');
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(t);
console.log('Container width: t.width(): ' + t.width() + ' text: '+ text);
console.log('Container width: t.height(): ' + t.height());
function height() { return t.height() > el.height(); };
function width() { return (t.width()+2) > el.width(); };
var func = multiline ? height : width;
while (text.length > 0 && func()){
text = text.substr(0, text.length - 1);
t.html(text + "...");
}
el.html(t.html());
t.remove();
}
});
};
以上是关于文本溢出：IE中的省略号的主要内容，如果未能解决你的问题，请参考以下文章