CSS实现单行多行文本溢出显示省略号

一. 单行文本溢出显示

overflow：hidden;
text-overflow:ellipsis;
white-space:nowrap;

二.多行文本溢出

1.方式一

display:-webkit-box; //将盒子作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical; // 设置或检索伸缩盒对象的子元素的排列顺序
-webkit-line-clamp:3; // 用来限制在一个块元素显示的文本的行数
overflow:hidden;

2.方式二

p {
position: relative;
line-height: 20px;
max-height: 40px;
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%);
}

注 ：该方法其实是使用伪元素来实现，这里需要将height设置成line-height的整数倍，防止文字的露出。伪元素后面加上渐变背景可避免文字显示一半

遇到的问题

     display:-webkit-box;
    /*! autoprefixer: ignore next */  
    -webkit-box-orient: vertical;// 多行省略，打包之后页面不生效，看看是否因为打包后代码遗漏掉
    -webkit-line-clamp:2;
    overflow:hidden;