|
|
1、文字超出一行省略,超出部分显示…1 W6 X: ]& w3 |" |$ j
: F9 X6 ]4 D7 [$ g9 }
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。$ d9 X! o9 A. R& Z. \8 j
- overflow: hidden;
0 B# R) f g5 e1 M i - text-overflow:ellipsis;
( n3 o, t- ?& d1 u9 z - white-space: nowrap;
复制代码
- O; k. K/ r5 p5 [3 C$ n+ w0 B: ^6 l, t! c* e2 {* b; }, _( g2 M
+ i# i+ L! d$ w0 H# X" z
2、多行文本溢出显示省略号…
" }9 s, Z& m' W8 `: ^6 [
6 A1 y8 g& r' ~) E1 k
$ c" ?3 r! t" |! Y% K) d( z! f% f- display: -webkit-box;% W! @1 ~+ [7 b+ f: g' J
- -webkit-box-orient: vertical;
8 i3 H- X# r. Z. Z1 r3 f0 | - -webkit-line-clamp: 3;
, R( U4 D6 a1 y- @ y - overflow: hidden;
复制代码
( p6 j) t) w) y6 t+ z: S8 f注意:
6 p1 Q! g3 r# U7 g D-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:$ ^8 \' Q8 V) {* `* k
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。" Y0 {5 |, d1 y7 j7 E
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
8 L l# ?# P+ @5 L, T% s$ z4 y7 ]9 J) V: }! g# _, |, h# m
6 n9 X6 h4 P# d+ w7 Z
- `, ]" x$ T4 \6 Y/ q O) _" d: Q, w# w0 e9 D' S2 M
|
|