搜索
查看: 5553|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
' c  b' }8 f" l9 Y" @+ x0 Y0 D1 G" Z, r* Y
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。" c. c/ d0 p0 q: h$ B( K( N
  1. overflow: hidden;2 Y/ Y5 O7 X: \! D2 L9 E- X
  2. text-overflow:ellipsis;
    8 e' l, j2 G$ h9 H! r
  3. white-space: nowrap;
复制代码

& {, w8 w1 g) N5 J" {' a$ I3 T* O! h9 J  K5 U

. ^5 ~4 K  _$ p! T4 S) _# U2、多行文本溢出显示省略号…
5 F- r0 D- i6 o8 b* `

/ G! j, X: C2 S
1 ~1 W  R' H. k9 D' Q
  1. display: -webkit-box;6 E) u1 P- h, _9 `5 v" [5 X
  2. -webkit-box-orient: vertical;0 t3 e5 a! y2 |
  3. -webkit-line-clamp: 3;4 W8 J" @0 d. Q. z- E/ a
  4. overflow: hidden;
复制代码
$ R0 u- G+ g& F( x
注意:& l9 e3 p+ s& v# d- G0 [
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:( n3 ]1 O  K+ K: b8 A. g
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
+ C9 @0 S& S# W) Z-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
6 [' X0 h+ }/ X0 B" k( `6 b& A/ g# g+ u+ u$ ~' q$ g

, L+ t7 e0 I0 A' U  G! e% i4 H; @# y, e7 L/ h
0 R4 p# h6 l. ^; G  \, X; U+ V" X
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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