搜索
查看: 5087|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…% m: k2 `, `4 V, j' q0 I" e3 x9 N# }
& ?! f6 Y, R6 y
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
+ r( W5 a; a! r8 c
  1. overflow: hidden;* ~  z- q9 A) y
  2. text-overflow:ellipsis;7 s, A; ]& P; h$ c3 x4 p
  3. white-space: nowrap;
复制代码

+ T$ Z# J+ k' y- [3 O' P. Y6 x2 C$ _) r$ f
9 f$ k5 L" n# Z
2、多行文本溢出显示省略号…

- V3 A! E1 A6 X7 T
' ^* W' ?1 s( w, ~) d5 _* V: }, p: H* u* F
  1. display: -webkit-box;, k* m/ }$ k0 U- K) l
  2. -webkit-box-orient: vertical;
    8 `( c7 ?; V" O* \
  3. -webkit-line-clamp: 3;
    6 ]% d- Q$ i6 o" \  x" g
  4. overflow: hidden;
复制代码

3 S7 C; C9 Z# f# d4 m) z注意:' @* U% m) G" [, X" f& s
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
: M3 M1 g$ W! K1 Z/ C. wdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。, V5 z; B. U  g# x0 X) D# e
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式% t+ `6 Q$ C/ _4 u! D
$ q. |' e4 b3 O$ x

, S/ T: o+ o; e: u1 m. W* N
% ?1 U. D2 V  I' g
; }( g+ v' \; L7 \: D3 K
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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