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

happyxp

1、文字超出一行省略，超出部分显示…
4 F- X, W/ w% F# Y- e. N1 ~
用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   
2. text-overflow:ellipsis;
   # h# ]* }6 z4 H$ W/ e" T' V
3. white-space: nowrap;

复制代码

1 z6 ]+ z" m0 {3 z! }: S; b3 ?* t
2、多行文本溢出显示省略号…
7 p$ L/ z, P5 D  L
( ]- {% E3 a/ g6 x5 {  y. o
7 w& ?/ _$ a+ X2 k; @% K6 A, \

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   - u# o! T; I4 r
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

  i0 |/ z9 j( }注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2 j. \8 I6 P: @- ]display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式


9 y) l9 {; L8 ]- j7 B2 G! U

6 i% q$ ^* h; x2 t' f