【CSS3】多余文字省略解决方案

单行文字省略

.truncation {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

在这里我使用该样式在行内标签中，不会出现 ... ，在外部嵌套一个块级标签然后再使用该样式就会成功

多行文字省略

.multiple-line {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;　　　//
      -webkit-line-clamp: 2;   //显示两行，其余省略
      -webkit-box-orient: vertical;   //行数方向为垂直
}

https://segmentfault.com/a/1190000008404083

 

转载于:https://www.cnblogs.com/Horsonce/p/7722401.html