CSS控制文字(单行/多行)，超出部分显示省略号

- 实现单行文本的溢出显示省略号

overflow: hidden;//盒子溢出隐藏
text-overflow:ellipsis;//文字溢出显示省略号
white-space: nowrap;//文字不换行

- 多行文本溢出显示省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;//盒子溢出隐藏

谷歌浏览器的扩展css，故只能在webkit内核的浏览器下使用，兼容性不好。

- 多行文本溢出显示省略号(兼容性好)

p {
   position: relative;
   line-height: 20px;
   max-height: 60px;//最大高度为行高的整数倍，此处代表3行文本
   overflow: hidden;
}

p::after {//后伪元素
   content: "...";
   position: absolute;
   bottom: 0;
   right: 0;
   padding-left: 40px;
   background: -webkit-linear-gradient(left, transparent, #fff 55%);
   background: -o-linear-gradient(right, transparent, #fff 55%);
   background: -moz-linear-gradient(right, transparent, #fff 55%);
   background: linear-gradient(to right, transparent, #fff 55%);
}   

适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。