|
|
1、文字超出一行省略,超出部分显示…# |, I2 f+ A5 Z9 a8 j# @
6 Y, u r# Q: X4 {( R2 x0 u. w
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
4 ^9 q) `8 H3 [6 g$ w/ z- a- overflow: hidden;
. p7 O) Q, S3 W( e" i, e4 v - text-overflow:ellipsis;
$ l1 K+ m7 Y3 F- x" D: f: d - white-space: nowrap;
复制代码 / k7 j6 v- T0 V- N
1 t' ?& w- \/ @+ ~' u- Q4 s }: _0 b
( V. B: C# g9 I5 t* G4 H5 v" O
2、多行文本溢出显示省略号…: k2 d, D/ N* p. q
h' {: |. W* ~& Y
% l1 d9 V9 j) C: |/ P% O' z( x6 C
- display: -webkit-box;7 r. x6 e1 n* I! i) u: V/ x
- -webkit-box-orient: vertical;
0 O* H) Q I9 H: Y& M" L- [ - -webkit-line-clamp: 3;
& c6 {. n4 e$ J: o# F - overflow: hidden;
复制代码 v5 M1 v2 K6 c/ v! e! j( v3 ~
注意:
2 C1 d! M9 i+ z* j/ A1 w-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:4 i+ Y8 s6 A" x) P
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
, U7 C/ G. J( u+ H- K& u5 k' f. h-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式7 B( l: v" o8 n6 K4 Z
6 U, q9 n# I; F; N6 D0 |; v! c0 ]
8 F# @4 i6 s) C5 f2 i8 } `% ?+ f! Y! d* F9 B1 A' B1 z" h
& S5 D( G9 d, _$ u5 u7 t |
|