搜索
查看: 4442|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
+ p% M. h3 n4 \& e+ B
* P% `' q, I$ _! m8 x: Y( }* g$ s用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。4 y. O) J+ ]: w% f; w9 M
  1. overflow: hidden;0 i$ M& L. _4 C9 a" m& M: J% ~  ?
  2. text-overflow:ellipsis;% |7 V% n4 |$ E) c
  3. white-space: nowrap;
复制代码
( o- n, D9 c& }5 V3 o# |
/ J, W( F; [, |+ J/ w# a3 g

1 z8 q! q5 ]0 t. J6 A2、多行文本溢出显示省略号…
8 f7 m+ {& h0 h9 R0 f

7 f1 o& e/ X7 D1 Q
' c' j- ^% D2 e% Y* z7 x: g1 q2 r
  1. display: -webkit-box;2 _# W) ], Y  C
  2. -webkit-box-orient: vertical;" U; D( @2 e, ^. N! q+ r( Q" |% ?
  3. -webkit-line-clamp: 3;
    & n& K0 n  D+ k# d4 o, s
  4. overflow: hidden;
复制代码

9 E* C* g5 \' N" N% m注意:* z9 E8 R5 i& g6 S
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
- }7 O8 [& F2 a- ?6 Z- |, vdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。% y' |+ k  a5 L8 R$ ?/ h9 o/ m! ?# L
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
; Y& Q4 G0 C# @% J* L' P6 ]! ^8 |; ~* b1 M3 F& h

( L$ \% w# B0 b- H1 j# F" i: K# M# g
$ m; P' {  a/ P5 i% x) s4 B- G" R' Y- S' w
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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