|
|
1、文字超出一行省略,超出部分显示…/ l J5 t" D4 A( x- T" L
! S( g9 R% t: {" e8 C用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。* D( }6 d$ F& N) m: i* A$ S2 D
- overflow: hidden;8 B2 G, }7 c' q- z7 G
- text-overflow:ellipsis;/ a5 a4 i0 D, Q( K& P! o! }7 U
- white-space: nowrap;
复制代码 : Y) W3 M. a) |" ?; ?6 p
: J5 {6 F9 N8 M4 M
/ H$ q, Y: R, f& D2、多行文本溢出显示省略号…; @* S& o: B. j1 d4 [' E& e F
7 {& Y* @. d) p' J1 w9 w* Q4 }7 i' ?# ?! v I0 }/ U' n
- display: -webkit-box;
# _7 l, ?- o& F" ^& R. W - -webkit-box-orient: vertical;4 f" _9 M: {, z. Z
- -webkit-line-clamp: 3;% K' w. M9 S, [* E6 G5 ?' ]
- overflow: hidden;
复制代码 9 ~& Z2 g; F! W
注意:
+ T6 F5 _8 ?( I. ~- A-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
; G& U" ^7 A/ B3 zdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
$ v7 n/ g+ ^4 J-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
( J, {0 i* n: k; W9 ^, c j# Z3 \" J7 k$ A* B
9 \4 G8 ?, _% ^7 Y' N1 m
* g# M# O% |3 Z4 z. m$ i* n& P$ ^; C8 O& [0 y
|
|