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

happyxp

1、文字超出一行省略，超出部分显示…
9 W9 Y1 f& d% ~9 T
/ h  W# g  M/ W% ]' c用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   5 F' b9 J/ c% i7 m$ Y  `( M
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

" v/ I8 v% j9 }+ P+ X. o

7 l+ U3 x7 h* {4 F7 k8 d5 A2、多行文本溢出显示省略号…

+ h1 ~- L& F7 P4 F
5 R" F4 o8 D" ~5 [6 [% f1 @. W0 M% ?

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   $ w% i7 ?0 q& w6 C4 H( `
3. -webkit-line-clamp: 3;
   $ s, g2 g3 D& Q3 w; F% X
4. overflow: hidden;

复制代码

注意：
' H/ _5 p, X+ [& `6 ~) f4 w* R-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
! ~% b6 }) c  {display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
* W/ r+ G! M+ ]  l0 e. N-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
3 U+ c" K, |; P6 A& b2 I) Y' T
% f) ?$ m5 f5 _; ?  v. F0 y: \

! {) b$ v+ n1 l- ]
; _, R  c5 n1 u; O$ e' `