搜索
查看: 4882|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
# k% z. [. p+ B# t, N, Q' |! g/ s! |3 D3 b
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
$ x5 R+ h$ d; ^: O# [5 q# Y" B
  1. overflow: hidden;4 c) v0 p8 z# u) g
  2. text-overflow:ellipsis;
    6 @: }( k' U8 X7 ~1 a
  3. white-space: nowrap;
复制代码
& X- \+ c% t, t( {- j

. ^5 t: ?0 J0 Y+ b& j# d
4 X& z" K. m8 ]) n: U& O3 N
2、多行文本溢出显示省略号…

! g8 I& S; ?7 Y& X5 d& V- B' h) G$ x5 C
' D# l  {9 l% `% ~+ B0 O7 H6 ^7 K% A' ^2 K  ^! `# I/ W$ {
  1. display: -webkit-box;
      @8 ?5 p# h# V4 b" L. Q8 O. T% B
  2. -webkit-box-orient: vertical;" c5 _  V1 B* n  ~3 P% t
  3. -webkit-line-clamp: 3;
    * Q' A4 o! B! ~% A: j
  4. overflow: hidden;
复制代码

% T$ ~) m1 D6 ~# c注意:
/ P9 e* W$ u8 ?- R' w* N% M-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:" E, r5 g9 V& U% k  x7 r0 `
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
4 {' n) G& S5 K; W-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
: z# l  i8 a4 S) y2 ^% e% o4 I. {5 q  c2 \- X% g

( c9 V- ^+ x' l( A6 A4 C: j  `7 D+ p

2 ?& m3 y: S, y- Q- a" a1 g0 G6 _
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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