- 实现单行文本的溢出显示省略号
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优化该方法。