搜索
查看: 5169|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
4 ], ~; N+ ?9 X# q+ r" F
5 R; _, u' n4 Q0 ~; H9 y% `  G用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
% r! W9 q' W5 u
  1. overflow: hidden;; [9 n! a: s* l" i8 `4 g
  2. text-overflow:ellipsis;* H  R  Z5 U' [( v
  3. white-space: nowrap;
复制代码
8 M& M+ ]6 E. R# F2 {
( Z0 \5 E7 t0 p: g, o4 }/ J' f5 ^+ C

4 X+ T3 ]& K0 D  O* q, i. Q+ u2、多行文本溢出显示省略号…
& n& U( _) N% |1 H9 _$ ]
: K/ e0 C2 {2 ]) [2 m, V" L

* b" i: h6 R+ l9 ~7 W
  1. display: -webkit-box;
    ' T. Q0 c# f7 W2 \
  2. -webkit-box-orient: vertical;' K' y3 m- T" ]
  3. -webkit-line-clamp: 3;
    . h  {/ b+ t) P2 F' l9 j
  4. overflow: hidden;
复制代码
, w- j1 m/ Y2 k/ O
注意:
6 J% C- w8 F# P$ k-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:/ q* S0 y* x0 C# Y: {/ j. f9 i
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。. A, ~% ]% L2 k- j! j
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式. ^9 [$ T4 z( P

; n& @4 s- K1 x: k8 x4 {4 G- X2 B2 c  {# q/ \/ \/ W& A* M
" _6 X7 \$ `4 s  A
" w5 o8 r" v* S+ u' B$ ~
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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