-
Notifications
You must be signed in to change notification settings - Fork 0
/
文本溢出处理.txt
49 lines (45 loc) · 1.95 KB
/
文本溢出处理.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
1. 单行文本溢出显示
{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
//当然还需要加宽度width属性来兼容部分浏览
}
2. 多行文本溢出显示
<1>
{
//适用范围:因使用了WebKit的CSS扩展属性,改方法适用于WebKit浏览器及移动端
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
}
/* 注:
1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
*/
<2>
div {
position:relative;
line-height:20px;
max-height:40px;
overflow:hidden;
}
div: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%);
}
//此方法有个弊端,那就是【未超出行的情况也会出现省略号】
/* 注:
1. 将height设置为line-height的整数倍,防止超出的文字露出。
2. 给p::after添加渐变背景可避免文字只显示一半。
3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>...<span>);兼容ie8需要将::after替换成:after。
*/