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

happyxp

1、文字超出一行省略，超出部分显示…
% m1 e% R! s- Y& m
8 r3 e  R$ Y* Q* E+ N* t用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   6 G* A. v, ?7 j" ]" J
2. text-overflow:ellipsis;
     Y! I. P9 U* H( ^/ W2 k
3. white-space: nowrap;

复制代码

2 ^' K3 o+ K+ W' u$ F. E9 g) q

2、多行文本溢出显示省略号…


5 e* H& e# I  ?. `

1. display: -webkit-box;
   
2. -webkit-box-orient: vertical;
   / u' ^! G6 w7 c
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

注意：
0 f" `" q3 O# y9 [-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
" f& J6 Y. W, D, y" x5 X4 pdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
* n/ q& r, o( n7 z, e% L4 w) p, ^9 [-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
# o1 n/ [% l9 I9 B


) d6 E% x! w$ r4 K
4 c8 x4 P/ }& o6 N: t- i8 Z