css设置当字数超过限制后以省略号显示...

happyxp

1、文字超出一行省略，超出部分显示…

用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   0 B# R) f  g5 e1 M  i
2. text-overflow:ellipsis;
   ( n3 o, t- ?& d1 u9 z
3. white-space: nowrap;

复制代码

- O; k. K/ r5 p5 [3 C$ n+ w0 B

2、多行文本溢出显示省略号…
" }9 s, Z& m' W8 `: ^6 [
6 A1 y8 g& r' ~) E1 k
$ c" ?3 r! t" |! Y% K) d( z! f% f

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   8 i3 H- X# r. Z. Z1 r3 f0 |
3. -webkit-line-clamp: 3;
   , R( U4 D6 a1 y- @  y
4. overflow: hidden;

复制代码

( p6 j) t) w) y6 t+ z: S8 f注意：
6 p1 Q! g3 r# U7 g  D-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
8 L  l# ?# P+ @5 L, T% s$ z4 y7 ]


- `, ]" x$ T4 \6 Y/ q  O) _" d