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

happyxp

1、文字超出一行省略，超出部分显示…
5 z1 v" S& L. N5 l3 d* I- A
( U( b. G. ^- f+ ~; K用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   # L0 L% ?* G. l6 C8 y( I
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

8 |* H# ?. `. c& x  E: V/ Y, Z

2、多行文本溢出显示省略号…
& L& L! @' C/ D2 [" U9 e$ h

+ X& N( s- Z$ v4 t9 ^& T& V0 q4 i

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   , l! Z; ~" \+ u( `2 L  W6 ^" u
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

5 o8 g! z1 a, B& J: u注意：
$ v* C9 Z; d3 Y# \' V1 [-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
" u( P+ `* s1 ]9 l; R9 C-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
0 e) r! k. K) G6 y, e* M

/ W/ R# U; d+ m& R

- ~/ t3 ?9 O: C; c% C5 Z$ k! A, G