搜索
查看: 4969|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
$ ]% k7 g5 Q' B- f
  u1 [# O5 m1 `3 l用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
: X# K5 D3 P* r1 _6 j
  1. overflow: hidden;
    ! B& g: P9 V$ V  r) m; h# C3 e
  2. text-overflow:ellipsis;
    / A: B* I; L5 \5 s2 I
  3. white-space: nowrap;
复制代码

; Y/ D0 E! d& J% F9 g: S! k$ T% Q) E

2 D. H8 q0 Y2 M, J  B% {4 k4 [2、多行文本溢出显示省略号…
1 m6 F: o% |$ y" D& u1 d- F$ s

( P( n6 x4 ~( ]' x- Q/ t& `. q: p5 t3 A/ d$ _2 r
  1. display: -webkit-box;
    $ N6 J% e, H% D! u* g
  2. -webkit-box-orient: vertical;
    + R1 u( z8 o" X6 r$ }
  3. -webkit-line-clamp: 3;
    ; I: K# O( ?! d# ~6 L
  4. overflow: hidden;
复制代码

& |3 g! r- C! ~注意:3 |) T, ^, p3 F( d; X& H/ X6 H9 W
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:, j* G' F# K2 U$ ]
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。5 {0 Q) }0 v7 Z
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式: A9 o' n/ \( u" L0 B

4 M# Y: r( N0 {. e  Z5 R# g: e/ z* c- C  B' o! Y

7 z, x; V4 M) ?
  o6 n5 _6 [1 o' f# U0 ~0 Y; |/ P
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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