Question

我正在尝试剪辑和处理IE中多行的文本溢出。我使用以下css。它适用于镀铬。但不适用于IE。

 display: block;
display: -webkit-box;
max-width: 400px;
height: 50px;
margin: 0 auto;
font-size: 26px;
line-height: 1.4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

Answer 1

我为自己的省略号使用自定义jQuery脚本，但删除word-wrap: break-none;或添加word-wrap:normal应该可以解决问题。见Here。

这是我最喜欢的解决方案：

String.prototype.dotdotdot = function(len) {
    if(this.length > len){
        var temp = this.substr(0, len);
        temp = $.trim(temp);
        temp = temp + "...";
        return temp;
    }
    else
        return $.trim(this);
};

<强> USAGE：

 title.dotdotdot(35);

@Alex是documentation的jQuery本地插件解决方案，您也可以使用：**

<强> HTML / CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
}

.ellipsis.multiline {
    white-space: normal;
}

<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

<强>的jQuery

  <script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
    <script type="text/javascript">
   $(document).ready(function(){
       //plugin usage
       $(".ellipsis").ellipsis();
   });
   (function($) {
        $.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);

                    function height() { return t.height() > el.height(); };
                    function width() { return t.width() > 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();
                }
            });
        };
    })(jQuery);

  </script>

如何使IE的多行省略号工作

1 个答案: