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

happyxp

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

用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
1 J. ?' V/ y8 c# A

1. overflow: hidden;
   7 d" B* Y# j1 V4 P  R
2. text-overflow:ellipsis;
   $ x; E& @- `9 e( b/ Q( y/ z
3. white-space: nowrap;

复制代码

" n* C; H* L( M, Z) g
7 ?0 K: W" ^  _, `, f2、多行文本溢出显示省略号…
0 Y2 q, g/ l2 r! h

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   : N) X/ q' E. e, s7 K) C: E4 m& f
4. overflow: hidden;

复制代码

0 s* J- p1 f5 O注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
$ M& o' w! [  {) l: T! o6 L, S  ?display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
1 q9 e1 l) D8 |, G-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
+ `; I, `$ {& l
* t% H7 h2 d$ B