css设置当字数超过限制后以省略号显示...

happyxp

1、文字超出一行省略，超出部分显示…
, x8 x4 h- ]7 n8 _
5 B& H' O/ s6 _用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
. g$ e* \! X: z0 o* B0 [! q

1. overflow: hidden;
   - ^) K' S, p0 U  m, ^0 w, y: E0 u
2. text-overflow:ellipsis;
   7 S5 t3 G" l; y" p
3. white-space: nowrap;

复制代码

% L+ o( C" c  L3 u

2、多行文本溢出显示省略号…


, D- {, q: e# @+ E6 P

1. display: -webkit-box;
   ! X6 Y2 k: b- w8 R' O* r' ]/ V5 B
2. -webkit-box-orient: vertical;
   " e/ v4 o) p9 \) h$ m
3. -webkit-line-clamp: 3;
   ' @. w$ _- Z# s) G9 B# H( ^- X
4. overflow: hidden;

复制代码

; \+ E" X  N% r& g# v5 U注意：
3 `, ^! M, o% u6 R3 K8 c: x-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
$ h+ Q6 E6 s( h; m8 q3 P7 Xdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

% P1 U! [, v$ l* z3 V) \


* t+ ]. O2 G4 X9 \- s; w7 K. n