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

happyxp

1、文字超出一行省略，超出部分显示…
) K, `6 {8 @( [+ C
用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
2 a5 Q) g; V, F. w# R! V5 d* k

1. overflow: hidden;
   
2. text-overflow:ellipsis;
   . d, z- ^9 y. G* H' y9 j3 e" v6 F
3. white-space: nowrap;

复制代码

# M5 }8 W( P- G
- t$ m: W/ ~; g5 Y, m4 V
6 H8 j' e3 [+ f1 W5 G, @2、多行文本溢出显示省略号…

6 u0 ]2 e) ]: S; o: w3 h/ k# N0 x

1. display: -webkit-box;
   1 l/ g' _% e; g8 R
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

. q5 [0 d0 R! o' }4 H: |注意：
4 q- t7 x* f% K-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
; S' h3 c) O, @( ?display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
, A: H/ p1 A, v/ i% e1 t-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
& N+ G+ C$ w" V0 S) ^) [


$ M+ S6 D' @$ m7 f* R