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

happyxp

1、文字超出一行省略，超出部分显示…
& q, q7 I9 f4 G  u2 h
7 k: J5 F: S6 _! A$ _用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   
2. text-overflow:ellipsis;
   ( F7 i( `# P3 n6 i( U; S* P) _
3. white-space: nowrap;

复制代码

1 a  B  L& N1 X5 _/ q- i
' V* M# ~/ k6 ?  z! ]9 ]5 `
. v$ A* O. V7 n- c2、多行文本溢出显示省略号…
6 U# Q  @1 [0 B7 g+ e! U
, f3 b0 p: u* z2 j8 V, p: E, u
6 F  M7 Q# E/ {: a

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   ! O- w6 k6 N" l% r) a( C
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

注意：
% Z; M) h) Z) G$ h4 V7 Y1 ]4 |-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
, d  N; ~* q8 U# B( ^, N  Jdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
7 a* T7 H2 t7 S' V4 e+ @( Q  ]