搜索
查看: 4454|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…, g2 }  k! G2 n2 O* y  R" A+ L6 H

' a. Q4 c' H8 x% B用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
& [: j  h8 w- ~4 [$ a
  1. overflow: hidden;' a/ @. g8 S+ Q6 \
  2. text-overflow:ellipsis;" m! p8 B6 i- K- j* u1 `
  3. white-space: nowrap;
复制代码
. b9 x- V7 O" n5 w. A. y
) G, ?5 ^% ?/ ~6 x
3 F4 p* N! P" V
2、多行文本溢出显示省略号…

5 Z5 t7 H% q6 k; J, T
  o- ^& A) o* B) Q8 u. s5 f8 j0 C" M! m# f9 i4 m
  1. display: -webkit-box;
    , z8 N1 X7 n$ H! h; V) y/ R
  2. -webkit-box-orient: vertical;2 R. o0 w/ @0 N
  3. -webkit-line-clamp: 3;2 M* ?1 P/ W  [" h" O6 b, l1 L0 Q
  4. overflow: hidden;
复制代码
% ~$ P( z. ]+ I$ j0 g
注意:
0 Z1 j; e# h2 o-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:* N: Z/ u" x6 G4 `& c
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
2 G( g5 B8 s/ k8 Q-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式$ {( t, a: y- m( d0 {( l

7 F! _/ ]. |) \2 Z) c, L+ C) d2 U6 ^+ {/ G! b% i
- Y7 v0 W+ K+ i2 U  d/ F
8 h, S: y6 r3 J  a* u
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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