|
1、文字超出一行省略,超出部分显示…
$ `2 L3 g: W. A. k# V. V r. l- V/ Y8 W
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。1 K1 q. ~+ |( J" g4 t6 D
- overflow: hidden;0 S, z6 Y" {; t* V
- text-overflow:ellipsis;' L# R: t: @0 u
- white-space: nowrap;
复制代码 ; \$ x9 J) p% y$ h. `
/ s5 T2 e+ S1 M6 e9 N2 J/ x
6 W" T' Y9 h! z7 z, }7 [2、多行文本溢出显示省略号…
) u- K" A5 g U) C2 I( v, P, z. K4 H, `2 X' U" {. ~
% c- G$ P) L& L- display: -webkit-box;' Y. v+ S9 U% V x2 @
- -webkit-box-orient: vertical;
- H# v% v* T' i" { - -webkit-line-clamp: 3;
' n5 I) ^/ G1 b7 L+ k - overflow: hidden;
复制代码
6 r% Q* v! k! U* u% ?7 R! I5 p( H, i注意:, k5 h7 P/ Y6 K
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
, E3 b* ?2 k+ C: jdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
@8 K5 H7 R/ a- D0 N8 B0 c+ d-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式2 r/ O O. z; Y( N$ a$ |
/ u! y: ^8 r/ [4 R! F
7 R; E9 z" t- r4 ` X& E
. y% {. y. \( | V& G: D3 Y; _. a2 z3 E8 J- T0 q2 t! y8 H
|
|