|
|
1、文字超出一行省略,超出部分显示…
( J! g) |% W6 M- |
( U& O; P! f+ @$ @用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
) ~* X% z9 L) N7 V% p- overflow: hidden;
, K, v5 S$ U! y' u2 @/ H - text-overflow:ellipsis;4 F/ g7 `$ J, a4 d1 t: f5 J
- white-space: nowrap;
复制代码
8 h* B3 n& I0 U4 y0 _3 j) D5 p6 ^" r- P9 O
% M/ I* H4 Q6 N2 u$ P2、多行文本溢出显示省略号…4 L( ^/ m! r: Z9 [/ o
! _! u: u Z8 Y/ Z
5 B4 { W; @. m0 n W& I" { F- display: -webkit-box;1 G' q6 ?3 p* h7 P) W
- -webkit-box-orient: vertical;
6 `5 K, b, A# c `" q2 L - -webkit-line-clamp: 3;: S, b+ n, @- b/ O9 \6 a: J1 z
- overflow: hidden;
复制代码 , z1 J" X+ H5 f2 D* f. x* M
注意:
# q4 L! o0 ~$ R1 g$ E8 _# W-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
( ?- h1 _' {; i7 Edisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
' H q4 p% W3 X: ^8 u) r-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式% k8 s0 C3 B! ?5 t8 v m# ^
0 D! u4 r& C' a B( |
! |& K9 E8 c# G& j# B9 W* M, O3 u* X2 C/ ?9 E& L; ^
" T7 u! J: d0 g- \
|
|