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

happyxp

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

# f7 x/ K0 g6 `2 ]' M1 ?# }用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   
2. text-overflow:ellipsis;
   1 \" A5 F# U" w- u7 W& ]8 x
3. white-space: nowrap;

复制代码

6 `, s) ^' ], Y9 L9 j! T
( C, e* P- a: e/ K, g, O% C! m
2、多行文本溢出显示省略号…

7 Q1 L- Y, l1 r, m; x' M
6 Z" m- e$ E: a) X2 G' I$ m

1. display: -webkit-box;
   3 h/ u) Z  \* N7 k: ~
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   ! P  b7 j1 M% U  q  Y
4. overflow: hidden;

复制代码

注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
+ G3 c* \6 }# j3 o: l! bdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  T0 b* G0 J  u* K% y-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式


) Z9 ~+ b. d6 [* I
5 t% L4 ]% k9 U/ g
' o' ^/ O+ j6 p, i  N) n