|
|
1、文字超出一行省略,超出部分显示…
. q+ B8 F) Y4 V0 V" q# `5 n! j
, H# B4 u8 C# t) _; M用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。# b% L: b- u3 P9 \
- overflow: hidden;3 k( b0 c6 Q9 i2 @$ `0 G, h
- text-overflow:ellipsis;/ J B2 \, a N6 X5 W4 N7 [. e* ]$ L
- white-space: nowrap;
复制代码
) a8 g3 v8 E' E4 q
$ X, {0 }5 N- p# L* _1 b3 S9 ^! v! F3 l0 M
2、多行文本溢出显示省略号…
3 h2 Z0 n$ L: R$ ]; ~
* v1 \+ M0 x$ H. x. ^# v6 W( l0 E: H6 R
- display: -webkit-box;
2 ~( B N- [$ y - -webkit-box-orient: vertical;
% g, ]5 ]( Z# } - -webkit-line-clamp: 3;+ L& I, C/ d9 @7 _3 R% ]1 u4 Y
- overflow: hidden;
复制代码 & W, g0 ~& {$ f$ f
注意:: {$ t- m- W1 h8 h2 P9 [
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:! A' J$ R6 f# Z; }. Q
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。( R$ G7 H6 e! O
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式( f: v* Q* ^# b6 d8 w! x5 p2 s0 w- y8 \
! c9 B% S9 F& }4 a! W9 o9 d
' B. X6 M: p" \# x8 S! \1 Y% X( Q5 i0 j, F
! Q2 D4 v9 r1 `3 _" F; z+ t
|
|