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

happyxp

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

' q0 w1 M8 J) V; w用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。

1. overflow: hidden;
   
2. text-overflow:ellipsis;
   ' u: p7 P- x) M( n' c7 |  f
3. white-space: nowrap;

复制代码

% e! C  e4 x% R4 C; l# O4 e( b3 D
1 N! A8 G" H8 K% X/ p' d" ~# S& d' E
2、多行文本溢出显示省略号…

. N: W: \0 a# b2 O  [9 }
6 {# R% ?3 k/ b% w7 v$ _

1. display: -webkit-box;
   - c% t! A8 f( Q- G& y
2. -webkit-box-orient: vertical;
   & Q! ?/ J. ~9 b6 k% b
3. -webkit-line-clamp: 3;
   
4. overflow: hidden;

复制代码

注意：
8 Q6 D4 }' l5 h# u/ [5 y-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
; }6 T2 V$ R6 ~3 @; G. o& g- q% mdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
$ V# K' O8 T# Z* Z- |. U-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
; P' O+ S: Q' d& s9 }9 L3 P
1 v9 F% j* p% n. \; I9 U. M+ o( l
7 i( j; j0 Z. a$ V# s( x, r* }" Y
0 D2 u# r! w% z9 M, a. [