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

happyxp

1、文字超出一行省略，超出部分显示…
5 W6 c2 G0 N5 w& @, s$ J
用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
; v! K$ w2 g# C5 j- X* @/ @1 |+ X

1. overflow: hidden;
   1 i  D; c4 V3 W  A* P+ n+ E
2. text-overflow:ellipsis;
   & S3 ?5 Q) N# K4 E
3. white-space: nowrap;

复制代码

- }7 X9 {1 @4 f6 `$ x! b! L2、多行文本溢出显示省略号…
1 p& D, n( G& w+ A
! Z& G( P4 p1 ~3 N. K4 B* M! _4 c

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   + V# L3 o- D0 Q  u9 U7 ]$ y6 l0 T
4. overflow: hidden;

复制代码

( m' v9 p1 Z+ y注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
' [0 Q  G* o- F# e+ c8 jdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
" d& H+ M0 a: w% W9 P3 P4 x-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

, t; @0 {2 E$ O& J" r/ N3 l( u