搜索
查看: 5554|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
! g/ v; j* A4 g
# t( k# x, e* P! V用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。& c6 A' x6 A5 v
  1. overflow: hidden;4 Q3 T! b& L- F+ d% o: |! {
  2. text-overflow:ellipsis;! M/ d7 I/ ^) Q5 ]
  3. white-space: nowrap;
复制代码
* v" T7 _" Y: f: C% V5 c

. e! ~- U8 T( e. |, f- `- t" J
1 }6 `4 Z# s/ a
2、多行文本溢出显示省略号…

- C+ h+ @, U. q6 H; V; }. h
$ @! p" b5 u3 Z/ I
1 ]1 b' V0 B) Z
  1. display: -webkit-box;. G0 }& H  p" _- T/ b9 k
  2. -webkit-box-orient: vertical;: @* c7 L7 H$ H/ }: W0 c# T
  3. -webkit-line-clamp: 3;
    : J, m, r1 _' E" R
  4. overflow: hidden;
复制代码

9 `! ^2 Z. s7 W% ~1 F6 H# t注意:9 K4 i' I2 T/ ^
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
5 a2 R( u  \1 y. S; Zdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
8 _# x' L2 U  }1 s. D-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
8 V6 a* x( f4 Q3 |, F. T+ M. B. c- d6 l' g$ S
" O, C" Z$ U* ^8 l- h5 G
$ `# m" R6 K7 B, [: G9 |

3 J0 Z, X8 |9 w; W- L4 F: N. g5 `
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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