How to make multiline ellipsis work for IE

Question

I am trying to clip and handle text overflow for multiple lines in IE. I am using the following css. It is working for chrome. But not for 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

I use a custom jQuery script for my ellipsis but removing word-wrap: break-none; or adding word-wrap:normal should do the trick. See here.

HERE IS MY FAVORITE SOLUTION:

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 is the jQuery homegrown plugin solution by @Alex that you could also use:**

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>