|
1、文字超出一行省略,超出部分显示…
2 C4 z3 E$ d: [( \1 a- i: u7 ?
b& u/ y( ^: q- c+ M+ P用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
) G. o7 E9 c( K4 W1 Q" d1 W- overflow: hidden;. b& B# O( K' ?5 k/ ]& \6 `
- text-overflow:ellipsis;
2 Z+ `; O5 M4 w% K3 c/ N - white-space: nowrap;
复制代码
2 M$ P! J( C, u5 h2 i; D, Z- L; e. y& m" c/ S' P7 N) O5 X5 q: ?; m O
8 P: `& ~0 h- c7 s, d: g. j- Z$ ?
2、多行文本溢出显示省略号… v5 C% K4 P2 w* Q, s
4 P ?6 u( G0 u% g
* ?! c/ h) w8 r- c* _( h& D% Y6 U
- display: -webkit-box;
: Y5 H2 a6 P( a% \ - -webkit-box-orient: vertical;& a% s1 S* _* w1 s: G' I
- -webkit-line-clamp: 3;
& S: u9 P; r! k+ r( q - overflow: hidden;
复制代码
' } h8 A3 q; \+ k注意:! P& a& h4 R# E
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
# L8 p3 |* r4 b' X6 R" R( }display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。% }" y" ?1 g0 R' r2 ~+ y$ _
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
, Y% M2 v+ X+ a, k, d# X5 p+ x) B$ H& U% o
7 R' y4 K- v' \, v: R
% ^' e* T1 e: e! w+ \
% f0 U# J& a `# C3 j1 z
|
|