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

happyxp

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

1 j* X( W0 @; g+ ^. W1 j用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   & m& }" D" q$ V; M( B
2. text-overflow:ellipsis;
   ' H$ M2 v  {, ]3 B
3. white-space: nowrap;

复制代码

2、多行文本溢出显示省略号…
, ?( ^3 P. ~1 Q; o; t

) ^9 c1 A( J' V* x0 h

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   ; w" m. G. E1 x7 W1 N9 s
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

9 x, D' I" m% _! p9 j$ r注意：
! ?6 h/ Z& S! E1 E- r/ U; `-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式


; Y" S& Q  T8 M! e$ Y8 p8 ]- G; C
: s4 a2 ^( F, [' T3 w+ l# _) Q