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

happyxp

1、文字超出一行省略，超出部分显示…
( L' Y( r  J# p
用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
+ K$ @$ @/ e" j3 @7 @; l

1. overflow: hidden;
   5 N" W; I9 M6 g) P; w2 _; h
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

0 c  _$ s) K! z+ |% n: O& p8 I

2、多行文本溢出显示省略号…
( B7 o4 A, J' g# [1 }9 \* |% V

2 `( n9 W4 T1 ~! e! F

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   9 M, P8 a9 ]" X! L' m3 _
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

2 V; m) H+ N) n; ~$ U. e注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
, d, {( `8 j7 P( \4 a* X+ T
2 F. K5 v# P2 v$ @

" D$ u+ Z$ U8 e# M8 o8 F. Q' m