文本溢出:IE中的省略号

时间:2014-09-30 07:45:21

标签: css internet-explorer css3

当我在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>

如果有人遇到问题,请帮忙。 或者请说我是否存在其他方法来修复它。

3 个答案:

答案 0 :(得分:0)

在包含全局元素支持的文本溢出时附加省略号,尽管您可以使用基于容器宽度的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();
        }
    });
};

答案 1 :(得分:0)

检查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/

答案 2 :(得分:0)

你必须在橙色等级中加入“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>