|
|
1、文字超出一行省略,超出部分显示…" O& e! @7 ~+ t
5 i, V, B. K. R8 e
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。% @# Y' Y* {+ L( n+ I+ a
- overflow: hidden;6 c: R0 e! L$ \6 B! o
- text-overflow:ellipsis;' L5 q$ M0 @) Q' x* ]
- white-space: nowrap;
复制代码
* {! A$ p* k( M5 a
3 Q! C b5 H5 C- E, p( ]$ \' G/ T) e5 V A
2、多行文本溢出显示省略号…
! n R4 |% Q9 `/ a& e( B5 a# s& W% L2 G, E4 k1 M# ?% w# o
# H6 s- u, c. v5 V/ g- display: -webkit-box;* h! l3 b+ d. J: G# C
- -webkit-box-orient: vertical;7 y4 p0 T& }+ D( B: g! x& s
- -webkit-line-clamp: 3;
0 c) Y( y& } o" ? - overflow: hidden;
复制代码
# k! ~6 |! S( S/ Q, l7 m注意:
. ~$ d6 R% a- Y) _-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
; I6 I: P; L4 Q; |( Odisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
+ K7 p; ^( J3 t( x! }* Q0 @* c-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
2 M! C# R9 z% G( u! S1 D$ z) i+ ~
; S1 d8 ]% K0 `$ N* C, {( ^: R( j
; I, n" [3 K4 {, o7 `3 O6 \* a$ C
|
|