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

happyxp

1、文字超出一行省略，超出部分显示…
* G) ~+ g' h! z" w
用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   % F: s9 y. C+ _% Q% p- i$ ^/ i/ T
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

- M. p) J0 D/ z' H2、多行文本溢出显示省略号…
9 N0 {! N/ ?/ y1 n, ?

- B: ^! L" Z- @- j

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   4 Z4 i; q3 g) N1 Z9 i4 L' N
4. overflow: hidden;

复制代码

5 Y5 P# Q9 E2 y% ~注意：
# C0 h  y- ]+ M( U5 ~) H-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
' _5 E7 c- l! D& B9 o5 qdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

9 h* B5 X& w& O6 h6 g/ _* N' j
9 o0 P6 L& t: m$ L" @) o