页面布局多行和单行省略

由于这种多/单行省略的需求经常需要，这里只介绍纯CSS实现方法

单行省略

html:
<p>
  我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
</p>

style:
p{width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

多行省略

多行省略，如果设置高度注意不能大于行数总高度，否则被省略的内容会显示出来

html:
<p>
  我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
</p>

style:
p{width: 200px;overflow: hidden;word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}

模拟多行省略

缺点就是如果字数不够也会显示省略号

<p>
  我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
</p>

style:
p{overflow: hidden;position: relative;max-height: 20px;}
p::after {position: absolute;right: 0;bottom: 0;padding-left: 40px;background: linear-gradient(to right, transparent, #fff 50%);content: "...";}

以上