|
1、文字超出一行省略,超出部分显示…, g2 } k! G2 n2 O* y R" A+ L6 H
' a. Q4 c' H8 x% B用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
& [: j h8 w- ~4 [$ a- overflow: hidden;' a/ @. g8 S+ Q6 \
- text-overflow:ellipsis;" m! p8 B6 i- K- j* u1 `
- white-space: nowrap;
复制代码 . b9 x- V7 O" n5 w. A. y
) G, ?5 ^% ?/ ~6 x
3 F4 p* N! P" V
2、多行文本溢出显示省略号…
5 Z5 t7 H% q6 k; J, T
o- ^& A) o* B) Q8 u. s5 f8 j0 C" M! m# f9 i4 m
- display: -webkit-box;
, z8 N1 X7 n$ H! h; V) y/ R - -webkit-box-orient: vertical;2 R. o0 w/ @0 N
- -webkit-line-clamp: 3;2 M* ?1 P/ W [" h" O6 b, l1 L0 Q
- overflow: hidden;
复制代码 % ~$ P( z. ]+ I$ j0 g
注意:
0 Z1 j; e# h2 o-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:* N: Z/ u" x6 G4 `& c
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
2 G( g5 B8 s/ k8 Q-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式$ {( t, a: y- m( d0 {( l
7 F! _/ ]. |) \2 Z) c, L+ C) d2 U6 ^+ {/ G! b% i
- Y7 v0 W+ K+ i2 U d/ F
8 h, S: y6 r3 J a* u
|
|