一行文本

只显示一行文本：

<div class='oneLine'>我是一段长文本我是一段长文本我是一段长文本我是一段长文本我是一段长文本</div>

相应的css：

.oneLine{
      width: 200px;
      border: 1px solid #ccc;
      /* div超出部分隐藏 */
      overflow: hidden;
      /* 文本不换行 */
      white-space: nowrap;
      /* 文本超出显示省略号 */
      text-overflow: ellipsis
}

多行文本

显示多行文本

<div class='multiLine'>我是一段长文本我是一段长文本我是一段长文本我是一段长文本我是一段长文本</div>

相应的css

.multiLine{
    width: 200px;
    border: 1px solid #ccc;
    /* div超出部分隐藏 */
    overflow: hidden;
    /* 文本超出显示省略号 */
    text-overflow: ellipsis;
    /* 控制显示行数 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* autoprefixer: off */ 
    -webkit-box-orient:vertical;
    /* autoprefixer: on */
}

注：有时候会出现-webkit-box-orient:vertical;样式丢失问题，可在前后分别加入autoprefixer注释。

实现效果以及代码

实现效果链接：https://xiaoguo16.github.io/front-summarize/text-overflow.html
代码地址：https://github.com/xiaoguo16/front-summarize/blob/master/text-overflow.html