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

happyxp

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

( G4 `! h- f* n1 c8 k用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   ( K! Z5 V2 `3 Y6 I: E- C
2. text-overflow:ellipsis;
   " ^8 B2 j2 b8 k% m
3. white-space: nowrap;

复制代码

' J& I; R1 A& y1 x
7 b4 e0 b) C- x# x9 x2、多行文本溢出显示省略号…
3 C" D7 M8 |2 G

% h. k4 h2 j7 Q2 x0 T

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   ) U/ d( O; q3 f5 T* J
4. overflow: hidden;

复制代码

注意：
' w# O) Q( V. A  A- Q* D, M- O2 y: V1 w-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
3 U% Z# K4 g/ m) I7 Qdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
( j- T" l' o- N% U) k- `-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
  s5 r/ u8 @/ U# S0 e3 a6 f


& G/ V8 S% X' y  ~5 z8 P
5 d! Q7 l4 c( O