|
|
1、文字超出一行省略,超出部分显示…! w ^* e9 ?3 F( J! C
" f+ n; G/ _6 {6 ]3 F5 w
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
3 \3 }0 x K h- \/ n% I4 y- overflow: hidden;
0 f- ~2 \! d3 z8 V' g! j: X O h - text-overflow:ellipsis;7 ?: Y3 W, A, y' J* p8 F2 l
- white-space: nowrap;
复制代码 : {0 y6 z' n- O5 n t+ E
( P; s, _ {+ S, _+ P% l) }1 F) J! d0 L+ o' L' D5 q: @' Y5 [1 ^. T
2、多行文本溢出显示省略号…/ v) ^& E: j% n: H( I4 z- U
+ d' P, X7 ]# ` g8 U& y: s
' Q2 Q6 U% \6 M! y* e- display: -webkit-box;3 g: P3 P9 C& d, F5 l* s
- -webkit-box-orient: vertical;
' r, Y, H9 H% }" T' c; @ - -webkit-line-clamp: 3;5 P6 H* g5 Q- d7 a: B V! h
- overflow: hidden;
复制代码
2 _% t/ s7 V$ H( N& r4 G注意:
/ w+ ?; P7 C, B: i2 o-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
# {' e# S3 i) bdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。$ b2 L1 N, W4 {$ @
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式( {( U* v) L$ b" z- t
4 c, O# }) P2 N5 _
$ L; `# _6 K# b- O3 C8 {3 l$ M% R! S- i6 f" `: ~$ i* J* k% w$ }
/ a/ A" K/ G0 L
|
|