IE中的文本溢出：省略号

Question

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

在Chrome中它看起来像这样：

firstlongword1...

secondlongword2...

在IE中：

firstlongword1...

secondlongword2 //单词被裁剪，但没有出现省略号

HTML and CSS:

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

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

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

- nikolai-s

---

尝试设置 white-space: nowrap;。 - gearsdigital

http://samples.msdn.microsoft.com/workshop/samples/author/css/textOverflow.htm - Gildas.Tambo

不可能的。我的意思是在两行上显示省略号。也许在Chrome中它可以正常工作，因为您可能使用了一些与-webkit相关的CSS。 - Mr_Green

如果我使用 white-space: nowrap;，文本就不会多行显示。通常情况下，文本只有一行，但用户有机会为名字和姓氏各写50个字符，如果发生这种情况，文本将变成多行显示。 - nikolai-s

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 Fiddle：http://jsfiddle.net/fL6za37f/2/

（该链接为编程相关内容，提供在线编辑代码的平台。）

- Hidden Hobbes

---

谢谢，它有效，但如果名字很短，它将不会显示在一行中。将尝试使用 JS。 - nikolai-s

@rtm7777 请看我的编辑，通过使用 display: inline-block; 和 min-width: 100%; 可以让短名称在一行上显示。 - Hidden Hobbes

它运行了！非常感谢！我花了整整一天的时间试图让它变得漂亮，而且没有使用js。再次感谢） - nikolai-s

@rtm7777 没问题，很高兴能帮助到你。 - Hidden Hobbes

Answer 2

当文本溢出容器时，可以全局支持添加省略号。不过你也可以使用 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();
        }
    });
};

- Kunj

Answer 3

你需要在橙色类中添加 " 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>

- Erfan Nazmehr

---

这是一个简单的一行代码解决方案。 - ARJUN