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

happyxp

1、文字超出一行省略，超出部分显示…
" b4 w1 B/ D6 E/ |) h3 i# g
8 }& y5 ?' ]4 d8 a9 o3 |% d+ ]用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
9 N0 ^1 b& a5 f! x% [8 \3 C$ w- I& |

1. overflow: hidden;
   1 O# e4 ^& U, O- p6 \
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

" ?, h9 B4 j3 T) y! Y: d2 J) m
2、多行文本溢出显示省略号…
& s/ L* ]8 f4 ?8 }! T
2 Q8 N/ a/ z* B* I% ^- ~1 C

1. display: -webkit-box;
   9 X: K+ q. F! N
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   * n% `  E, o: p0 l( F, R
4. overflow: hidden;

复制代码

注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
6 p4 Y3 l) h* G4 Ydisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3 a: o. I* n$ `0 T8 g; Z4 X4 m-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

$ {( |0 w* x+ Z7 ~; I; ~6 S


* e/ S/ j: t5 g5 J; ^8 Y3 q