/*单行文本溢出*/
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*多行文本溢出(每行高度确认的情况下)
省略号的背景颜色跟文本背景颜色一样,并且可能会遮住部分文字,建议可以使用渐变的png背景图片代替。
IE6/7不支持after和content,需要额外添加一个标签来代替;
*/
p {
position: relative;
line-height: 1.5em;
/*高度为需要显示的行数*行高,比如这里我们显示两行,则为3*/
height: 3em;
overflow: hidden;
}
p:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background-color: #fff;
}
/* 多行文本省略(只限制行数)
这个方法合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器,效果可以查看:
*/
ellipsisLn() {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 3行后溢出省略
}
css处理单行文本&多行文本溢出省略
最新推荐文章于 2022-07-18 23:06:01 发布