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

happyxp

1、文字超出一行省略，超出部分显示…
, W1 r$ M; @/ r/ @8 Y. p6 ?  H
用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
* c& t6 a! r1 a/ }7 M: |3 B/ h

1. overflow: hidden;
   $ ?2 W' K6 R% k4 @
2. text-overflow:ellipsis;
   0 Q  r2 T/ |  |5 w
3. white-space: nowrap;

复制代码

1 |0 T2 d: F8 m2、多行文本溢出显示省略号…
2 u- X) U: n3 v! E2 d3 c
! z: d4 V! g( L. _) \
3 i* l  ~9 V) J* L9 X: x1 ^! H

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   0 j" A7 }4 u' i2 @& x5 ~- y
4. overflow: hidden;

复制代码

注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
* W& ?: T: K  L- J1 Q% i  gdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
' g7 w! h% C: A! b-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

4 E9 b/ ]/ s( J* g
* j3 a3 W" R! }, L
1 D, m" X* L' \- i
9 }* L2 T4 D/ N* f% J