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

happyxp

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

0 m' ?2 t  u: Y9 |; l% B用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
+ v" J) F: T0 e% r. _8 D) A' ^

1. overflow: hidden;
   % B0 E" L$ \1 A1 E' Z& I' P  {
2. text-overflow:ellipsis;
   
3. white-space: nowrap;

复制代码

% m8 p* T$ P+ u6 q$ p" \; L( ?

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

1. display: -webkit-box;
   : ]) r; o3 h4 y6 D, A8 t. L& d& j
2. -webkit-box-orient: vertical;
   & Y9 b( T1 k+ S6 d) K
3. -webkit-line-clamp: 3;
   " y# v: c3 U  J& _6 C$ k
4. overflow: hidden;

复制代码

: O) P6 z5 U5 h0 v, d注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
, w7 l- w/ B, ?, h+ n-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式




) ]- d% p( }8 {0 k