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

happyxp

1、文字超出一行省略，超出部分显示…
3 z. F. Y+ n% v2 f$ N
; m/ ]3 B4 g9 I. @/ i0 Y用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   ( Y4 U9 a+ e: I6 I
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

' E7 g6 \, H0 q& s/ [4 w
2、多行文本溢出显示省略号…


+ l( G% E( O0 ?/ G0 u# f

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   / d# Q9 G% [0 ?8 T5 q0 J
4. overflow: hidden;

复制代码

. }. c/ f! ~0 h4 F! Z注意：
9 E. Z2 O& e; |3 m+ v3 w$ V-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
; c/ P. z! K, }: _5 V. sdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式


& n. b! I  \# m7 R* V

) ^: p7 j# [) S+ Q1 K' C6 w