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

happyxp

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

用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
4 ^9 q) `8 H3 [6 g$ w/ z- a

1. overflow: hidden;
   . p7 O) Q, S3 W( e" i, e4 v
2. text-overflow:ellipsis;
   $ l1 K+ m7 Y3 F- x" D: f: d
3. white-space: nowrap;

复制代码

2、多行文本溢出显示省略号…

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   0 O* H) Q  I9 H: Y& M" L- [
3. -webkit-line-clamp: 3;
   & c6 {. n4 e$ J: o# F
4. overflow: hidden;

复制代码

注意：
2 C1 d! M9 i+ z* j/ A1 w-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
, U7 C/ G. J( u+ H- K& u5 k' f. h-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

6 U, q9 n# I; F; N6 D0 |; v! c0 ]
8 F# @4 i6 s) C5 f

& S5 D( G9 d, _$ u5 u7 t