使用该方法可能遇到的问题：

• 为了保证截字的准确，必须对文本使用word-break:break-all，以保证英文单词、长串字母都能在元素边界打散。
• 如果文字的行数刚好和截取的行数一致且文字最后一行超出截取的位置，超出部分将无法显示【如果只是为了截取展示，不需要展开折叠，这条问题可忽略，否则需要通过js进行高度对比来动态去除类名】。
• 如果文字中间出现全角字符、字母、汉字混排等非常不规则的字符，有可能出现一两个字符的偏差。
• 多使用了一次title文本数据，会导致页面的数据量加大。

如果以上问题都不是问题，那么可以接下去看看实现了

html代码：

<div class="lastline-space-ellipsis js-toggle-box" title="你让我只显示2行就只显示2行啊，你让我只显示2行就只显示2行啊，你让我只显示2行就只显示2行啊">
    你让我只显示2行就只显示2行啊，你让我只显示2行就只显示2行啊，你让我只显示2行就只显示2行啊<!--这里的内容是为了撑开高度-->
</div>

以下以两行截取为例：

.lastline-space-ellipsis{
    position: relative;
    max-height:40px;/*用像素表示，不要用em，以免造成不同浏览器下计算出现小数点取舍不同导致1像素的差距【行高*截取行数】*/
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;/*强制打散字符*/
    line-height:20px;
    color:#fff;/*同背景色*/
}
.lastline-space-ellipsis::before,.lastline-space-ellipsis::after{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    color: #333;/*实际文本颜色*/
        content: attr(title);
}
.lastline-space-ellipsis::before{
    display: block;
    z-index: 1;/*显示在最上面，展示前面的(截取行数-1)行字符*/
    max-height: 20px;/*根据行高和截取行数调整，值为[(截取行数-1)*行高]*/
    overflow: hidden;
    background-color: #fff;/*同背景色*/
}
.lastline-space-ellipsis::after{
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-line-clamp:2;/*截取行数*/
    text-indent: -3em;/*行首缩进字符数，值为[-(截取行数-1)*尾部留空字符数]，取负值把每行多padding-right的部分给缩进回去*/
    padding-right: 3em;/*尾部留空字符数*/
}

这样就完成了尾部留空并且做了截取了，title属性值里可根据实际情况做下截取减少些文本量，如果要展现全部内容，只需把.lastline-space-ellipsis的类名去除即可。

另外要实现右侧的箭头控制则需要多做一层嵌套。

<div class="lastline-space-ellipsis js-toggle-box" title="你让我只显示2行就只显示2行啊，你让我只显示2行就只显示2行啊，你让我只显示2行就只显示2行啊">
    <div class="expand-box">
        你让我只显示2行就只显示2行啊，你让我只显示2行就只显示2行啊，你让我只显示2行就只显示2行啊
        <i class="icon-toggle"></i>
    </div>
</div>

另外针对inner标签所做的css如下：

.lastline-space-ellipsis .expand-box{
    max-height:60px;/*(截取行数+1)*行高*/
    position:relative;
}
.lastline-space-ellipsis .icon-toggle{
    background:url(url) no-repeat;
    background-size:cover;
    width:10px;
    height:10px;
    position:absolute;
    bottom:20px;/*使用固定定位，在没超出高度的情况下，会被before伪元素给挡住，这样就不会显示该按钮了*/
    right:0;
}

要判断是否折叠，判断一下.lastline-space-ellipsis的高度和.expand-box的高度是否相等就好了。

$('.js-toggle-box').on('click',function(){
           var wrap = $(this),
               inner = $('.expand-box',wrap),
               wrapHeight = wrap.height(),
               innerHeight = inner.height();
           if(wrapHeight > innerHeight && wrap.hasClass('lastline-space-ellipsis')){
               wrap.removeClass('lastline-space-ellipsis');
           }else if(wrapHeight == innerHeight && !wrap.hasClass('lastline-space-ellipsis')){
               wrap.addClass('lastline-space-ellipsis');
           }
     });

扫码关注w3ctech微信公众号