搜索
查看: 5063|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…" F5 J9 N  {' w# H
7 I/ m& q1 T  U& k4 m6 [5 [; j
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
0 `" J+ K# e- e1 g5 y7 q/ Q
  1. overflow: hidden;* D1 @7 L$ G1 o1 W, K  Z; \& q
  2. text-overflow:ellipsis;! f# q* y6 _: R, F- E
  3. white-space: nowrap;
复制代码
6 @) _& c# e0 y' A: O: n/ ~

3 P* x* N4 t& V" y
2 c" |4 r) K& v2 O- }, C9 n
2、多行文本溢出显示省略号…
) V0 c3 I2 v* n6 P! ]( _8 M

+ }4 ~3 H% ~% D. Z: Q
0 e7 M$ h% t' A
  1. display: -webkit-box;
    , v( ]$ j4 b* H5 i1 l  K- u
  2. -webkit-box-orient: vertical;9 L/ j. R; o$ x, S( H+ g6 c
  3. -webkit-line-clamp: 3;
    1 ]* F( c9 @) b
  4. overflow: hidden;
复制代码

# l& J' W7 m( K! ]+ G: f% n1 _注意:8 }0 C+ x+ C0 A
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:. M' ~# K( K& n4 Y
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。" n, `; b! N5 e0 E7 l% s
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式2 _8 L; P% F9 \0 g$ K$ k
0 |5 b: {! |/ V( a% f; O9 W
/ X& Y; ~$ e) w1 q1 y. _: C
$ Z4 L  V& w" {) N& v' E) L2 T. w

5 q5 B: S5 b; p7 A4 C4 N
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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