搜索
查看: 4959|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…; N% \: @& s8 \& w5 B4 W
0 }( N8 v1 |) H
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
, o7 E/ ], E' ]
  1. overflow: hidden;6 w2 H% E8 U/ o
  2. text-overflow:ellipsis;
    & k+ K3 q, b9 m$ C1 u' d
  3. white-space: nowrap;
复制代码
" S! A, p! j$ G+ T! n3 {
) i- ?! H) y+ X3 g4 }+ E
5 _& j2 r% k" ]/ G3 {
2、多行文本溢出显示省略号…
" f6 e: q5 }0 \: y7 Q* h) [# h

$ A/ @  r% q4 G1 C. U9 @* |( c, H0 j+ a* ^$ z) N  O! h" R
  1. display: -webkit-box;
    9 {! X) b5 y( q$ O0 R  K
  2. -webkit-box-orient: vertical;# n! X7 N9 `* c: M
  3. -webkit-line-clamp: 3;9 C9 Z6 s  S- z
  4. overflow: hidden;
复制代码
+ A" h5 a3 y9 D' s8 V
注意:
6 R' g) Z  ^% P/ q-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:+ P  j; C5 n) E7 M7 {
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
/ O8 x; n# l: l* i1 W9 n/ C4 S-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式1 Q& b$ e+ c, Q& s3 P4 L
# S. Q- {  o5 k' w

# \4 e# D. f6 M
. W' E) q$ e8 f( K4 [, h3 _1 i9 n  `* k
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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