|
|
1、文字超出一行省略,超出部分显示… N" |" y5 J2 L+ Q1 N5 Z
# f7 x/ K0 g6 `2 ]' M1 ?# }用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。! j/ G8 H6 G- E! l1 P% D: ~
- overflow: hidden;4 e" o. r5 @7 z! K% Z4 R5 y
- text-overflow:ellipsis;
1 \" A5 F# U" w- u7 W& ]8 x - white-space: nowrap;
复制代码
6 `, s) ^' ], Y9 L9 j! T
( C, e* P- a: e/ K, g, O% C! m7 q u2 b$ p/ u$ f* S9 ^- |
2、多行文本溢出显示省略号…, S' A& Y# [. J4 C/ {1 Q# o$ H
7 Q1 L- Y, l1 r, m; x' M
6 Z" m- e$ E: a) X2 G' I$ m- display: -webkit-box;
3 h/ u) Z \* N7 k: ~ - -webkit-box-orient: vertical;/ L y9 T# I9 v3 ]: r! g
- -webkit-line-clamp: 3;
! P b7 j1 M% U q Y - overflow: hidden;
复制代码 # G" o7 R' g& `$ W$ M m E$ x
注意:" A3 K7 ~, J7 ^5 A
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
+ G3 c* \6 }# j3 o: l! bdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
T0 b* G0 J u* K% y-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式% l: j) B3 R5 L/ U4 K9 N! _1 O P- J
+ }9 Y" U* s. _* r7 L
) Z9 ~+ b. d6 [* I
5 t% L4 ]% k9 U/ g
' o' ^/ O+ j6 p, i N) n |
|