搜索
查看: 5016|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…# c) ~2 }+ E3 }5 _% y1 t+ J+ ]
& q. W: ^& a  k( @3 a. M
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。" q" L, D# T% [0 z# \) }/ Z
  1. overflow: hidden;+ `) l/ x; ?% G0 c5 s$ M, W/ C
  2. text-overflow:ellipsis;$ F6 Z( n6 w  e" w* p- G
  3. white-space: nowrap;
复制代码
3 t* \" ?5 r2 a8 P2 Z
& {$ a* I6 W8 Z& ~/ P9 d

/ m: M- U" w* [1 D8 q$ I" K2、多行文本溢出显示省略号…

& B# h& ]/ j9 I8 a6 B7 w' W# A
% X! @; z, c0 `5 s3 h  b# |6 N: t
/ M0 r# r' z8 E0 q
  1. display: -webkit-box;
    - [" P1 D4 j: j6 w* {+ D8 C
  2. -webkit-box-orient: vertical;
    ; U: T7 m: k8 g7 H6 ^. g9 R6 |/ h/ }
  3. -webkit-line-clamp: 3;
    8 R8 v5 y0 P" l0 R, S
  4. overflow: hidden;
复制代码
/ ~) m$ V* }+ m' J
注意:
$ n. U  ~5 p. y- b& X" p-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  C; W  i: N) c: t& O/ q; Fdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
1 J/ [+ y" A6 L8 e. y/ Y-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式! t* l# M, s) B) a$ H" I$ X
4 D0 `* K' h  d/ @" D  I
! \, u: g0 U# R# p# e7 D8 N' n: M
& @4 X7 Y* e% A3 U3 g" |% d& @3 L% Y

! M3 H1 C0 L( ]) l; M) K( f- C
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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