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

happyxp

1、文字超出一行省略，超出部分显示…
$ ]% k7 g5 Q' B- f
  u1 [# O5 m1 `3 l用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
: X# K5 D3 P* r1 _6 j

1. overflow: hidden;
   ! B& g: P9 V$ V  r) m; h# C3 e
2. text-overflow:ellipsis;
   / A: B* I; L5 \5 s2 I
3. white-space: nowrap;

复制代码

; Y/ D0 E! d& J% F

2 D. H8 q0 Y2 M, J  B% {4 k4 [2、多行文本溢出显示省略号…

( P( n6 x4 ~( ]' x- Q

1. display: -webkit-box;
   $ N6 J% e, H% D! u* g
2. -webkit-box-orient: vertical;
   + R1 u( z8 o" X6 r$ }
3. -webkit-line-clamp: 3;
   ; I: K# O( ?! d# ~6 L
4. overflow: hidden;

复制代码

& |3 g! r- C! ~注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

4 M# Y: r( N0 {. e  Z5 R# g: e/ z

7 z, x; V4 M) ?
  o6 n5 _6 [1 o' f# U0 ~0 Y; |/ P