搜索
查看: 5171|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
+ b* {5 I- N* k# g3 V5 k
% `! ]  l, A8 K/ w用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
/ `& L& R1 }" M( A/ y
  1. overflow: hidden;7 E- F3 r# D- u) o8 P
  2. text-overflow:ellipsis;
    " J/ j5 _# v$ i4 ~; T
  3. white-space: nowrap;
复制代码
% ?7 N$ f( Y8 ^4 i7 Y( b
7 L9 }8 m5 T' z4 {' y

. ]& E+ V! B4 M9 V- k- Q4 F! z2、多行文本溢出显示省略号…
3 ]- X  g, `: x* U+ e- A  [4 f/ U

' o- g; ?$ M  Q3 u
/ U- @: a1 S" Z+ M% w* A% A$ x1 {
  1. display: -webkit-box;
    ) q; \1 o9 p  w0 {. Z
  2. -webkit-box-orient: vertical;
    ; u  O4 E, C6 G; x8 I# h) N0 G
  3. -webkit-line-clamp: 3;' N) P6 d. ~' r* l7 l7 J
  4. overflow: hidden;
复制代码

* [! A' ?. E) b注意:* O2 I  y" ~" Q9 \& Z
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
3 g8 _; J3 ~! W0 h: v8 P5 A$ Hdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。  c6 T8 P$ C2 _7 R4 C" f2 E6 _2 R
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式, E' K2 _: l. I" S

8 @( L, ?! b+ k5 ]- C1 F* Z' ]( o4 J

+ ~6 I) Y$ H3 a+ r7 ]$ I! ~0 E1 b& E2 U
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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