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

happyxp

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

9 N/ I8 ^1 E- `, h2 G用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
* |5 ~7 A- n; j, w& ~5 r& @+ z" n

1. overflow: hidden;
   ; h% f2 c% |" a/ D( g4 t/ e( |
2. text-overflow:ellipsis;
     Q' k; |7 @6 z# @8 J% U. ~1 A
3. white-space: nowrap;

复制代码

7 s7 R4 f2 G3 R6 u9 V" [0 C
2、多行文本溢出显示省略号…
8 `; `1 O4 G5 S" ]" i1 O

6 R) U9 a3 D$ D2 h1 L

1. display: -webkit-box;
   + I( I1 k4 r8 O! n
2. -webkit-box-orient: vertical;
   ) |5 T: }2 r6 q6 N
3. -webkit-line-clamp: 3;
   + j" N: z; ]  G- k7 g
4. overflow: hidden;

复制代码

- H3 s8 ~/ p0 n; S! ^1 _" h注意：
: }; u' O. M0 _4 c& Y0 x" }2 j-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
4 i. c- n! O4 x+ z, M, Z3 u+ F% A: ^display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式



9 j- K7 E  i! ?4 ^" D
2 X* h$ o5 v! {( e& S