多行显示并在最后一行截断文字？

text-overflow基本知识请看上篇文章：
text-overflow: ellipsis;什么时候可能不生效？

单行文字我们为了能够截断文字，使用了

white-space: nowrap; // 强制文本在一行显示

如果我确实有多行并在最后一行截断文字显示的需求呢？怎么实现？

方法1 -Webkit-line-clamp property

优点: 最简单的方法
缺点: 但是很遗憾，它不支持跨浏览器（在Firefox和Internet Explorer中不起作用）。

-webkit-line-clamp CSS 属性可以把块容器中的内容限制为指定的行数.
它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical时才有效果

在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).

当他应用于锚(anchor)元素时,截取动作可以发生在文本中间,而不必在末尾.

使用方法：

.block-with-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

方法2 Text-overflow: -o-ellipsis-lastline

从10.60版开始，Opera增加了在多行块上剪切文本的功能。老实说，我从未尝试过，理论上只在Opera 10.6以后可以使用，不建议使用。

方法3 JavaScript

#block-with-text { 
    height: 3.6em; 
}

function ellipsizeMultiLineText(id) {
    var element = document.getElementById(id);
    var words = element.innerHTML.split(' ');
    while(element.scrollHeight > element.offsetHeight) {
        words.pop();
        element.innerHTML = words.join(' ') + '...';
     }
}
ellipsizeMultiLineText('block-with-text');

方法4 纯CSS解决 & 跨浏览器

优点

纯CSS
自适应 Responsive
改变大小后或者字体加载事件后不需要重新计算
跨浏览器

缺点

文字小于指定行数的时候，我们需要一个背景色来掩盖‘…’
我们需要空间来放‘…’, 而且如果父节点overflow: hidden 或者 overflow: auto 我们需要去掉style margin-right: -1em;.

实现方法

/* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

实现原理

大于3行时

:before 的内容"..." 在右下角, 因为文字被justify （text-align: justify;）不会看到文字与"..."之间有空隙:

去除CSS text-align: justify;会看到文字与"..."之间有空隙:

小于3行时

看不到"..."

等于3行时

看不到"..."

方法5 纯SCSS解决 & 跨浏览器

因为方法4中的缺点，所以写了个SCSS mixin。这样的话使用起来也更方便，也有复用性。

CodePen multiline例子链接

1.大于三行例子：最简单的方法，但是很遗憾，它不支持跨浏览器,在Firefox和Internet Explorer中不起作用. CSS属性可以把块容器中的内容限制为指定的行数.它只有在 display属性设置成-webkit-box或者-webkit-inline-box并且-webkit-box-orient属性设置成vertical时才有效果在大部分情况下,也需要设置overflow属性为hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis )
2.小于一行的例子，不会出现“...”在文末
3. 2.5 行的例子: 最简单的方法，但是很遗憾，它不支持跨浏览器,在Firefox和Internet Explorer中不起作用.

body {
  margin: 0;
  padding: 50px;
  font: 400 14px/1.2em sans-serif; 
  background: white;
}

p {
  width: 500px;
}

/* mixin for multiline */
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount; 
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
  }
}

.block-with-text {
  @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white);  
}

The reference link

MDN text-overflow

微信公众号：岚坤爷
个人博客地址： http://liyuankun.top
知乎专栏：岚坤爷的前端+机器学习知识库
简书： Muzilan
Github： catherineliyuankun

多行文本溢出省略ellipsis...css/scss/js方法全总结