搜索
查看: 5550|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
: _- p! l$ I+ ?7 {, S4 z$ E0 A* r- D
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
& ?+ E* K( k. l$ h
  1. overflow: hidden;8 E& b% g: x# |8 x: F  v/ V
  2. text-overflow:ellipsis;* _. u$ m+ J2 M6 D/ r
  3. white-space: nowrap;
复制代码

5 O% H& o8 M& i' q& A& }) g1 L9 d5 W0 s# w) V& T* U. }
5 _! x' D& ]( ^: `6 ?
2、多行文本溢出显示省略号…

; c) M1 l/ p, Y+ F9 |) ~4 K. n* h/ |
4 y8 g9 O9 d2 P9 E. J; G
  1. display: -webkit-box;8 Y* {* |- E! ^7 E
  2. -webkit-box-orient: vertical;0 C: G8 V; ^" q5 c# h3 o. c7 T
  3. -webkit-line-clamp: 3;
    / D8 x5 Q9 S5 V# {* s4 _
  4. overflow: hidden;
复制代码

/ a  |$ G, p+ x+ h3 i5 l, O2 n$ m注意:
$ u+ i* p, e0 Q" d0 o9 a+ X-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:( a, O; f& U6 `  n# v5 g" q
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。& ]# \+ Q9 E% |& s  @* j  l1 X3 w7 N
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式5 ~- X" V" A/ k1 a* b

# e/ ~) X9 D) x+ H5 d  F! `) d, O% s& i6 X/ H( |
0 a: l% ?; u7 L: Q' d

- x/ \+ Q+ z, j2 J+ D' S5 D
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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