|
|
1、文字超出一行省略,超出部分显示…5 f& G5 t! p( N4 Q: W6 Y# o r0 K1 {
) D" v6 F8 L, R2 P) @9 O0 C3 f$ G用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
6 C4 w$ f( q1 q! m$ N' m( R- overflow: hidden;
" g& d% z" Z( a - text-overflow:ellipsis;( M5 Q6 s1 G: T" O2 ^6 C, ~' d, F
- white-space: nowrap;
复制代码
) @3 l$ \9 p3 L3 G( r; F7 O2 ]7 g" z& |5 d: B6 X/ m3 ^1 |6 N
|3 {) w! ~$ x
2、多行文本溢出显示省略号…
. }% T' L. V. u) v3 E" r8 f( d+ |8 b3 z
, x8 O1 J, [! I0 w- display: -webkit-box;" K2 u0 }( [3 B6 J, I
- -webkit-box-orient: vertical;1 x, p! h/ b7 z1 A2 H. _
- -webkit-line-clamp: 3;# l) b6 ^/ I# ~% U# G" U& ?
- overflow: hidden;
复制代码 6 n3 F) [) {3 X
注意:- W9 ?0 @4 h9 }7 G+ b
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
2 D! x. A5 j0 m. K% Udisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
% k' e9 q: `5 X7 ]; m* j0 }7 A-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
7 A Z" J3 @6 x4 ? _" F( I3 Z7 Q5 W8 ]0 J# b
1 A* \! ~) ~. @
& x& ~) v$ W8 c2 ~$ k4 Z
* p8 ~6 Q1 _2 Y E9 m |
|