WebKit CSS

CSS小技巧

CSS小技巧

多行文本省略号

多浏览器适配方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
p {
position: relative;
line-height: 1.5em; // 行高
height: calc(1.5em * 3); // 行数,行高的倍数
overflow: hidden;
white-space: normal;
}
p::after {
content: "\2026\2026";
position: absolute;
bottom: 0;
right: 0;
}

这种方法的不好处在于效果不好,会有很明显的遮挡

webkit内核浏览器

1
2
3
4
5
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box; // 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 3; // 用来限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical; // 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式

在webkit内核浏览器中表现良好

清除浮动

经不住似水流年  逃不过此间少年
0%