|
|
1、文字超出一行省略,超出部分显示…) v- _' k7 [$ z& Y; s; F
5 M P7 u) x0 ^; K5 @用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
\0 e5 D" h' t- f- overflow: hidden;+ h9 R, u) r) u! G3 S( g4 k
- text-overflow:ellipsis;& Y6 y+ B$ A* M- e* H
- white-space: nowrap;
复制代码
2 e+ g$ o7 i) a. b- d# C
" R4 j* y7 x, n3 `: C) }" r j6 f; b* h0 m
2、多行文本溢出显示省略号…
% x4 e5 X5 M p8 S; Y1 b1 J. n; V0 w4 m. S! \0 {" r
$ N& o) \. d8 ~. V& n% X- display: -webkit-box;8 }3 f2 S; p/ l+ |3 p x- H
- -webkit-box-orient: vertical;' r8 D6 z( l& p2 u
- -webkit-line-clamp: 3;
) F2 D. x$ q: j3 ]7 G - overflow: hidden;
复制代码
2 M0 Z6 [) f4 V- |* C注意:
, {1 T1 _+ }& n* F-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
3 I8 F2 n2 p3 y( D1 V V3 `display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
$ m' D2 g# f% A-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式6 ^6 _5 \; p( m" c# p. U+ K
8 I; c) {; s9 {4 v' g1 `8 _. q2 _) t( V, r; e9 ]+ X, h. a7 q, I3 k- J! B
4 H, M" H5 u4 l, Q
2 T5 F! g* o" f1 ? |
|