多行文本溢出显示省略号的方法

两种方法：

一、

利用WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。

display: -webkit-box; 
-webkit-box-orient: vertical;    //方向
-webkit-line-clamp: 3;         //设置在第几行添加省略号
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;

1、-webkit-line-clamp限制在一个块元素中文本显示的行数。它需要组合其他的WebKit属性。常见结合属性：

2、display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

3、-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

代码如下：

  <div class="ellipsis2">这是一串很长的文字，现在开始哦。第二行文字在这里开始了，第三行文本内容内容内容文字</div>
  <div class="ellipsis3">这是一串很长的文字，现在开始哦。第二行文字在这里开始了，第三行文本内容内容内容文字省略开始。</div>

  //css样式
  .ellipsis3 {
    width: 200px;
    max-height: 5em;
    line-height: 1.5;
    margin: 20px;
    outline: 1px solid #ff9900;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
  }

  .ellipsis2 {
    width: 200px;
    max-height: 5em;
    line-height: 1.5;
    margin: 20px;
    outline: 1px solid #ff9900;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
  }

效果图：

PS:注意：当-webkit-line-clamp分别设置为2和3时候，文本的省略号展示位置是不同的。因此：我们在使用该方法时候一定要计算好高度，确保省略号在最后一行，以免出现样式问题。

二、

思路是这样的：

1、在框右下角放个...，盖住右下角的内容

2、在内容尾，跟随一个mask，盖住上述的...，内容超出时，mask被推出，显示...

具体原理如下：

首先我们的最终实现方案是，我们最终的方案是要保证当且仅当内容溢出时，显示...省略。

那么应该如何实现这个功能呢？假如我们的内容只能承载20个字，我们可以拿个东西盖住...，当且仅当内容溢出时，不盖住...。那么如果实现对...的覆盖呢？我们可以采用“推”的方法，想象一下，我们找个东西盖在...上，然后，我们一直在这个东西前面添加我们的文本内容，当把这个东西推到框外时，就意味着文本内容溢出了，...需要展示。而在此之前，由于东西一直处于文本长度<20的情况，所以它将一直盖住了...，也就是说，内容未溢出时，不展示...

实现代码：

<div class="ellipsis">这是一串很长的文字</div>
<div class="ellipsis">这是一串很长的文字，现在开始哦。第二行文字在这</div>
<div class="ellipsis">这是一串很长的文字，现在开始哦。第二行文字在这里开始了，从“里”字开始，就应该被...省略了。</div>

//css样式
<style type="text/css">
  .ellipsis {
    margin: 20px;
  }

  .ellipsis {
    position: relative;
    width: 200px;
    max-height: 3em;
    line-height: 1.5;
    overflow: hidden;
    outline: 1px solid #ff9900;
  }
  .ellipsis::before {
    content: '...';
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    width: 1.5em;
    padding-left: 3px;
    box-sizing: border-box;
    background-color: white;
  }
  .ellipsis::after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: white;
  }
</style>