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

happyxp

1、文字超出一行省略，超出部分显示…
6 e7 Y% A" W" A/ J5 ]- S9 j' T; Z/ I
用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
1 p9 Y; f8 s! J9 }8 p

1. overflow: hidden;
   7 S( B0 R/ Q* x; k+ j
2. text-overflow:ellipsis;
   . B/ V. P8 F% \4 K
3. white-space: nowrap;

复制代码

& y; R5 B. A& q5 t! H* m2 M% b
" o, @1 ?: h3 @  z; B  y& _
9 S; j" y0 }* h0 @8 M' Z2、多行文本溢出显示省略号…
' Q6 |0 w  z0 K. @' H

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

0 a4 V$ |+ R1 r+ I" l& k! R! F9 K注意：
+ @" o% p1 L3 c' P6 D-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式


- J. T! }5 u& B% b* B+ R% O6 r
9 k$ `9 k' [8 e: o2 J