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

happyxp

1、文字超出一行省略，超出部分显示…
& O( \  ?6 t* s. c; j  {4 h$ f
& U: y4 E$ F- L! u; u用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   . ]3 H  G0 ?+ Q
2. text-overflow:ellipsis;
   ) l) V( i: y* _' @1 _( Y- Q  I
3. white-space: nowrap;

复制代码

2、多行文本溢出显示省略号…
1 P) Y1 n0 V. q9 {: Y5 w4 N7 g
& D* w- N5 S% f, v5 F4 u9 j
" {2 U9 e# Y0 T* g

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   : T4 [! m2 T+ ^. h/ ]
3. -webkit-line-clamp: 3;
   - M( r  \' z; G, O* Z
4. overflow: hidden;

复制代码

6 o2 g3 j1 Q- o7 a注意：
3 t. \  t3 A# n1 ~1 s1 N$ c3 v: p-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
; g9 w' A  U/ ]display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
( Q; t9 ?- ^9 W! r
. w% n4 c6 q* y' [: m8 H