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

happyxp

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

, K0 G" K; O: f) n, \用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
3 O. N( S1 j; S, T. r! O

1. overflow: hidden;
   
2. text-overflow:ellipsis;
   $ e; O( v; R  e4 d$ F$ U; }
3. white-space: nowrap;

复制代码

& E9 H( c  ?8 H$ Z4 W& t8 D7 D

2、多行文本溢出显示省略号…
+ G. z9 h- T5 G- E8 y% ?& i
/ D- V4 r) o! b/ W
- U1 G, ^* _- Q0 k) H4 b7 B5 l

1. display: -webkit-box;
   : v2 a$ }' D5 o+ t! l! E# \: Q
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   $ O5 |# a; f) Q7 U+ [
4. overflow: hidden;

复制代码

3 b/ G1 F* Z  R# N注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3 |1 ]$ s1 b6 C7 M, J4 k-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

4 d2 j9 F8 x1 `: i% z, C5 Q

8 L5 O& M7 H/ ^" l* y
/ }' [, h) G! O; B1 T5 p. Q