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

happyxp

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

$ Y/ L; h2 y* p' o" k6 K6 l7 v用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
7 ]! @3 u% K: h6 Z/ ^5 S  W

1. overflow: hidden;
   & k( A# d- j1 h( |; e4 v
2. text-overflow:ellipsis;
   * a" i( r' k( B  h/ p1 a5 n8 G
3. white-space: nowrap;

复制代码

3 O$ t2 h  w. _/ R3 H

" _; S$ _' e  C* h! K1 T8 e2、多行文本溢出显示省略号…
2 R0 t1 F7 J( l. P0 F: |
  ?4 _2 o) N; X& s# ]7 ^

1. display: -webkit-box;
   & Q! m2 p/ }8 k( N! z7 |" |9 e
2. -webkit-box-orient: vertical;
   
3. -webkit-line-clamp: 3;
   " p* D# @# G" n& S# M$ m+ Z7 }
4. overflow: hidden;

复制代码

0 U" c" I$ \# y( a7 z) ]; M注意：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
% {, t- w" W, \-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
# D, U7 I! a& V8 i& r# l
% I: {* D' M' A+ W5 U& d  N. Y- Y
5 \) L' T) K4 L/ W) H7 `  v

/ R2 k/ f5 P& s4 H/ t