搜索
查看: 5514|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…8 P' }; {" ]+ g# h! J& P2 i! o% Q5 R8 x
/ I. ?9 I3 y  Q3 ^: j- z1 J0 ~4 x
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
% J" k- w, p* |7 f
  1. overflow: hidden;
    ; |% S2 U+ {' f5 b3 e; n
  2. text-overflow:ellipsis;& c4 c& Q: `, H! s5 I7 ?* U, S  {
  3. white-space: nowrap;
复制代码
3 @9 @# E4 F$ V9 V; W/ c, n

0 u- @4 t  L( |9 `+ b7 }8 O7 x8 S. F

8 P3 J! y% |! m  U" t* ~2、多行文本溢出显示省略号…
8 }. w7 V+ [9 @' k; X) N2 l  V' l

2 k, Q( I' e7 \, U# q! R
+ }3 f6 _8 y, i8 Z+ W
  1. display: -webkit-box;' c3 A9 u* S. ^% T' l
  2. -webkit-box-orient: vertical;! \/ ~, d0 b6 C. A; S$ \
  3. -webkit-line-clamp: 3;3 ~1 @7 I5 w6 s3 }8 u
  4. overflow: hidden;
复制代码
. e- Z) }  G9 {# a- U. P) e
注意:
+ U1 Y5 K  H7 D3 \- _0 q7 G-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:& ]4 u+ ]; {* d3 T
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。5 s: i; h% a1 P5 s
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
6 X( ?7 ^! r* H/ o) f6 e( l8 {$ M4 O( v. ?

! N/ U- A5 H# E  T
* o7 W& v% x# ~0 J+ H7 [4 `$ x4 \, o
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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