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

happyxp

1、文字超出一行省略，超出部分显示…
0 ~& `; C5 _5 Q0 _. p( Q
用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
. e! ?' f# h3 I, |

1. overflow: hidden;
   / a3 o+ o  y% M4 T: P. X+ [2 r( T
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

+ v- F. W) Q( e- S9 e, @0 D
3 ^: i* `. c. W& b2、多行文本溢出显示省略号…
% x9 C1 y% b  [/ R/ S  g6 l

1 C6 ?. T2 F) R/ R# w- E

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   ; a3 r6 m4 G* v+ o# T
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

9 y) B: \0 p5 A- Z* J6 M( D注意：
" t; Y2 n, ]. z9 Q- |2 J4 `. f-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
, ^8 g, g- o# _. ~) F3 e' N! xdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
+ b( \8 S5 d. j5 }( r! G" U" k' _-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式