搜索
查看: 5014|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…# a  L$ `+ p" f% O4 T
/ u5 e$ J, S+ u" E8 g, G
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
( `5 W- a/ ]; ?% M6 H  V/ g: `. k
  1. overflow: hidden;1 X! K7 ?- x. J; N, _
  2. text-overflow:ellipsis;
    5 n3 [# n2 Q) O" L
  3. white-space: nowrap;
复制代码
. [7 _2 Q) S2 }9 ?7 }

$ b2 u) F, @; u! D0 r& S1 ]8 T6 H
; @0 \6 @' `5 [  |% w+ d
2、多行文本溢出显示省略号…
4 }- b0 O5 U* r4 A; T6 b' l
8 p& C6 `! r7 ~8 m6 R
7 Q7 u- q, m, ~' `
  1. display: -webkit-box;
    - y9 d: }) y6 J! T; P: r+ n
  2. -webkit-box-orient: vertical;
    , q, _8 l7 ^" f3 U* y" b+ R' o1 G8 [( Z
  3. -webkit-line-clamp: 3;
    . i8 J, }: u$ R. Q# |; B
  4. overflow: hidden;
复制代码

! y$ S* l) m% o  z# D/ P注意:
& e" s" l" Q: V% D& L  j& z-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
) j+ \: v: b* a' }+ _7 ~8 adisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
. `, y8 x# G- ?-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
* S: L# I) F" w+ U) {# O. u7 b$ M
8 {: q# h+ |$ z7 t

" L' ~6 n" I6 t: Z) V7 b, p( l, C! b+ C7 ?# y7 s; j/ }
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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