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

happyxp

1、文字超出一行省略，超出部分显示…

6 J9 m/ Y. P7 j" J2 r用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   
2. text-overflow:ellipsis;
   # i3 F' u9 m& ?% X5 [& w1 M3 ^
3. white-space: nowrap;

复制代码

2、多行文本溢出显示省略号…
6 }6 @. i% Y$ @( a
7 V" v% n4 `8 N

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

复制代码

( |" @" g0 S! q9 }# b3 v注意：
6 t+ m; V# A" R9 p+ a- W2 q-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
0 p5 |- T# Q& [7 }1 S0 T4 {display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
. q! J) v) V: }1 |-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

8 Z3 ]% n7 r/ j" K, Q


0 k) n2 D2 B* U: l5 s