搜索
查看: 4844|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
2 C4 z3 E$ d: [( \1 a- i: u7 ?
  b& u/ y( ^: q- c+ M+ P用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
) G. o7 E9 c( K4 W1 Q" d1 W
  1. overflow: hidden;. b& B# O( K' ?5 k/ ]& \6 `
  2. text-overflow:ellipsis;
    2 Z+ `; O5 M4 w% K3 c/ N
  3. white-space: nowrap;
复制代码

2 M$ P! J( C, u5 h2 i; D, Z- L; e. y& m" c/ S' P7 N) O5 X5 q: ?; m  O
8 P: `& ~0 h- c7 s, d: g. j- Z$ ?
2、多行文本溢出显示省略号…
  v5 C% K4 P2 w* Q, s
4 P  ?6 u( G0 u% g
* ?! c/ h) w8 r- c* _( h& D% Y6 U
  1. display: -webkit-box;
    : Y5 H2 a6 P( a% \
  2. -webkit-box-orient: vertical;& a% s1 S* _* w1 s: G' I
  3. -webkit-line-clamp: 3;
    & S: u9 P; r! k+ r( q
  4. overflow: hidden;
复制代码

' }  h8 A3 q; \+ k注意:! P& a& h4 R# E
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
# L8 p3 |* r4 b' X6 R" R( }display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。% }" y" ?1 g0 R' r2 ~+ y$ _
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
, Y% M2 v+ X+ a, k, d# X5 p+ x) B$ H& U% o
7 R' y4 K- v' \, v: R
% ^' e* T1 e: e! w+ \
% f0 U# J& a  `# C3 j1 z
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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