IEの複数行省略記号を作成する方法

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を参照してください。 HERE

は、MY FAVORITEソリューションです：

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); 

Hereあなたにも使用することができ@AlexによってjQueryの自家製のプラグイン・ソリューションです：**

HTML/C SS

.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>