搜索
查看: 5017|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…2 h" H- E2 h2 m
2 b- `% z, |9 S7 K
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
9 b3 ]& \  z4 y8 M' F5 D5 Y- H
  1. overflow: hidden;
    . q" W( ]* w( x. y- J6 I5 F
  2. text-overflow:ellipsis;& Y' {* `- n$ {2 W
  3. white-space: nowrap;
复制代码

. r" j7 \) z2 Y( s+ M% X7 d, F, s( u7 w0 X( Y+ e3 s% l- Y6 {4 p

% M: ]- q+ O7 f  b$ b2、多行文本溢出显示省略号…

% `4 o. L7 C( ^$ P  g1 }; @  u; }! x

, J% C; Y6 ^( q
  1. display: -webkit-box;
    + ^" Z6 X; r8 ?2 w# R3 K8 }( W" w
  2. -webkit-box-orient: vertical;
    ! z1 C3 Z5 b. Y1 c$ C+ f; d# j
  3. -webkit-line-clamp: 3;, y* G% V4 L; [3 p/ ]1 S5 ^- G2 x
  4. overflow: hidden;
复制代码
8 e$ P+ i7 h, I
注意:) i. `( U* B6 d6 F% w2 k1 |7 }
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:6 S2 ^; ?) \! Y: B* u3 Z, s
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
: k: d  l9 O3 Y-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式' d+ `% n7 _$ t- N# }& t+ H  ^& D
* i. J! G* O# E, ~
1 n; [! l7 L1 K6 ]/ C4 E

" ?# l- W1 Z4 g4 Y# j
( s- t: \7 t6 i  Q7 R8 f# j
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

热议作品
精华帖子排行
精彩推荐

虾皮社区,成立十年了!

站长自己也搞不懂想做个什么,反正就是一直在努力的做!

Copyright © 2007-2019 xp6.org Powered by Discuz

QQ|Archiver|手机版|小黑屋|虾皮社区 鲁公网安备 37021102000261号 |网站地图
返回顶部 返回列表