|
1、文字超出一行省略,超出部分显示…
8 j, @/ x# P, p Y) R! { g2 q, x
$ k' @, H% b# j用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
, B# o: U5 B* C/ k8 T9 z- overflow: hidden;
9 Q/ Q2 i1 X. s9 f - text-overflow:ellipsis;3 M7 \! w8 q' u0 U2 V
- white-space: nowrap;
复制代码 ! J# _3 a. v4 {+ Z/ G; z5 ~% y
, h8 D. e8 S8 T9 u- e& i! l4 @ w2 _/ D/ t1 w% X6 R
2、多行文本溢出显示省略号…
; T2 m9 T+ w; d- O. M8 e
6 @7 g: ~! g& O: n, J* o: r4 n: k
9 ~" d/ L7 Z# Z4 `- display: -webkit-box;
: ]: I8 R$ w& e, b" I) | - -webkit-box-orient: vertical;
, G6 N, {6 ?5 K8 |/ a - -webkit-line-clamp: 3;
$ X5 E# K7 j6 g5 P+ z - overflow: hidden;
复制代码
9 M# H- {9 o ?# C" q4 \注意:
4 Z' z0 H+ b' l2 I K( z-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:2 C7 F4 N& o5 x* r& L* C0 l
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
& y! I+ i, P" z4 c B' N-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式0 h3 I2 J6 _8 n3 I6 |, [
$ t z0 G# ~! M1 `
e5 I5 o8 d6 N- @4 [. `$ A0 h( A
, q1 Q% C* v6 [, q# W
|
|