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

happyxp

1、文字超出一行省略，超出部分显示…
! z- `5 P# m$ P' M" b  n$ U
" I7 G& Z) _" X+ ^8 ~# m用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
2 h5 Y( f" ]& B4 T, c) j

1. overflow: hidden;
   
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

4 h$ P' h; p* D; V

2、多行文本溢出显示省略号…
* s# `' f2 K. i( ^- A
4 J( S. t& ^( d* P8 f
6 L" ]4 U7 o" E# c; w% h

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   5 ]# p! w/ u3 c; ^: M
4. overflow: hidden;

复制代码

注意：
+ ]7 N5 y3 F  m7 c, h-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
% c% ]) a" k, r  n/ g8 ndisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
+ f$ L- [8 g9 ?3 f-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
; M3 U# g; e/ S; s7 A- v0 \



5 Y! L( D( U1 b# k7 z- w* q: ^