|
|
1、文字超出一行省略，超出部分显示…; M) a- I# B9 v" |' f. ^
1 O8 k+ S, l% V9 ]1 ]# M! B- A8 I用text-overflow:ellipsis，需要加宽度width属来兼容部分浏览。
4 `+ A. k8 M' q5 n; @/ Y- overflow: hidden;
9 O+ t* C( E, }& z' z - text-overflow:ellipsis;
2 o9 N. `5 {! @2 F* a - white-space: nowrap;
, b c9 P) v" J7 F0 T5 ~
5 C5 M: l/ X& r7 ]- B/ X, N0 l5 C1 u
2、多行文本溢出显示省略号…) B2 b: R4 S3 n( J1 r7 \. V
3 i& q# ^9 i4 E, |5 q- r, F( n: o
( O6 k% ]. o$ W' p0 F- display: -webkit-box;" t8 E0 y5 W, D; }; t
- -webkit-box-orient: vertical;, [. A9 b7 R4 P" g% {
- -webkit-line-clamp: 3;
# r/ @ G# G- O/ z/ O, n; F - overflow: hidden;
/ L2 q$ N7 j! N& ?; D ~注意：
& q! l/ h; f4 g" Q, A/ L/ Z-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
% C1 f" T j+ f& f2 cdisplay: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。- D1 M# ^6 ^$ F7 w
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
& b* Z K( z1 l9 R* z1 e w/ k! H$ C. A [7 Q/ I5 i
8 O V) n9 N U5 q, L, w4 b2 x; E
) U1 c7 ?: U _7 h! }/ B; B |
|
发表于 2023-11-16 22:21:20
千斤顶
显身卡
鲁公网安备 37021102000261号