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

happyxp

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

" o, [7 m# u7 j4 m: r" R" {0 D9 V用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
/ a$ x9 Z- |5 p

1. overflow: hidden;
   . R) Z1 f# \0 G5 @$ k% D) J) r
2. text-overflow:ellipsis;
   + A  m6 _' w, Y
3. white-space: nowrap;

复制代码

2、多行文本溢出显示省略号…
, m; d5 k0 b. I$ I1 W- @6 P3 p
+ e+ y& \# C" N+ n
& b3 P) Y5 }8 w7 E/ i( |1 U7 k

1. display: -webkit-box;
   7 e$ _  G# f& U. {
2. -webkit-box-orient: vertical;
   $ L0 S  e) v; V* H6 B7 I
3. -webkit-line-clamp: 3;
   6 ~* k" O: K8 {5 d- @( j
4. overflow: hidden;

复制代码

7 {' Y0 i# h& g& ?' {' M, _. F. Z9 p6 S注意：
7 x! \, c# S$ M" w-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
" j* w5 }: h2 {( o+ v* mdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
9 g8 k; Z+ A. S, {1 O6 s! e6 _-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
+ k1 b7 G$ ~# p% u9 O% o

0 T/ [' f$ @  D! {2 H