CSS-通过css来实现单行或者多行文本移除显示省略号('...')

单行文本：

我们看一下如下效果

这种情况随处可见，实现起来也很简单。

  <p>
      友情，能够随时说话找一个能随时随地和你聊天的人真的很难。
  </p>

p{
      width:10em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

多行文本：

我们看一下如下效果

仅通过css实现的话有俩个方法

方法一

    div {
      width:500px;
      display:-webkit-box;
      overflow:hidden;
      text-overflow:ellipsis;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
    }

  <div>
    友情，能够随时说话找一个能随时随地和你聊天的人真的很难。当你某一刻想倾诉时，翻遍所有通讯录，也没那么简单，就能找到聊得来的那个人。
    或许你人缘不错，与你认识的人很多，和你关系不错的人也很多，但即使是你朝夕相处的家人，甚或是亲密无间的爱人，你也未必见得想什么时候说就能和他说，想说什么就说什么，什么时候都不必担心失礼，不必自责，不必畏惧被冷淡和被斥责。
    电视剧《康熙王朝》里，康熙拥有后宫粉黛三千，他最爱的人是容妃。他到容妃那里，最爱说的话就是：“朕想和你说说话。”然后，把一些国事家事倾诉一番。
    你干的事情再伟大，再轰轰烈烈，你也是一个人，一个有七情六欲的平凡人，也希望有一个贴心贴肺、知冷知热、能深刻理解你的思想与情感的人在身边，跟你交流、沟通。
    能够说说话而已，细细想来，也就如此。
  </div>

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。有些兼容性问题。

方法二：

    div {
      width: 500px;
      border:1px solid ;
      line-height: 1.5em;
      height: 4.5em;
      overflow: hidden;
      position: relative;
    }
    div:after {
      content: "...";
      font-weight: 900;
      color: black;
      display: inline-block;
      position: absolute;
      right: 0;
      top:3em;
      height: 1.5em;
      width: 100%;
      text-align: right;
    }

div内文本不变。

这里我们需要注意，我们必须知道你要求的行数，最后一行末尾加...，在css上体现为height=k*line-height.我们把div的伪元素的内容变成..然后定位到结尾，具体实现看一下就明白了。