|
|
1、文字超出一行省略,超出部分显示…7 w! U' P4 y$ v' p1 J9 i
) @! X9 X/ U2 M: N1 w! @用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
! c& v. m- r N' j C; G- overflow: hidden;
% p+ _/ V+ L! }9 A) y( O6 w; H - text-overflow:ellipsis;% D0 w8 |* o- r2 O; b
- white-space: nowrap;
复制代码 , y( ] B( M4 _3 I; C
" t# _7 v4 G$ A6 ~( _- O; H
/ H$ _/ b% {+ ?" J, W
2、多行文本溢出显示省略号…7 q V2 Z- y, T
7 s3 r+ C) u. o+ J
+ W; t: S6 Z7 b9 ?2 @1 N" ]; X- display: -webkit-box;
* I: i; Z5 e2 Y, Z8 l& @4 ? - -webkit-box-orient: vertical;
8 v. {1 p* ` t - -webkit-line-clamp: 3;7 h+ M% R) Q4 I& W- u* i1 U
- overflow: hidden;
复制代码
7 O; O- |& h4 x+ F注意:0 \- D9 a i, P0 c0 ]1 W* U
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:6 N) z1 ?9 m8 D ]/ G
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
# p `/ _( \& {& g1 R8 C-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式" V4 l2 K7 D1 j! b7 @& \, z9 A, ?
( P$ I3 Y% ~4 Y( a- S
6 }$ M) o0 O: A! |, ?, f; ]* c% r! d7 `5 f1 e
, Y2 C$ u5 H9 q0 ?) N1 `9 G
|
|