css - 如何使多行省略号适用于 IE

Question

我正在尝试在 IE 中剪辑和处理多行的文本溢出。我正在使用以下 CSS。它适用于 Chrome 。但不适用于 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);
};

用法:

 title.dotdotdot(35);

Here是 @Alex 的 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>