搜索
查看: 4958|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
" b4 w1 B/ D6 E/ |) h3 i# g
8 }& y5 ?' ]4 d8 a9 o3 |% d+ ]用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
9 N0 ^1 b& a5 f! x% [8 \3 C$ w- I& |
  1. overflow: hidden;
    1 O# e4 ^& U, O- p6 \
  2. text-overflow:ellipsis;9 v! K+ O  T. M/ |% R( e( x* Z
  3. white-space: nowrap;
复制代码
( c  o0 L9 ]+ P% R/ h: L- t

" ?, h9 B4 j3 T) y! Y: d2 J) m
: M' G( @% D* T* n9 C3 v+ `& M, ~
2、多行文本溢出显示省略号…

& s/ L* ]8 f4 ?8 }! T
2 Q8 N/ a/ z* B* I% ^- ~1 C+ G" z9 l6 d+ }, b
  1. display: -webkit-box;
    9 X: K+ q. F! N
  2. -webkit-box-orient: vertical;% E! f( l$ L  i: t. _- _3 U
  3. -webkit-line-clamp: 3;
    * n% `  E, o: p0 l( F, R
  4. overflow: hidden;
复制代码
# s# E  Y7 M4 }- t; j& ^/ L# l
注意:( [9 d2 G2 M, E2 I
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
6 p4 Y3 l) h* G4 Ydisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
3 a: o. I* n$ `0 T8 g; Z4 X4 m-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式7 n% w& D" H! t" ^8 o! H# {

$ {( |0 w* x+ Z7 ~; I; ~6 S5 G1 [, n* K# P$ I& s1 g$ ~% r
% r9 H; L1 y! z- K5 ?: K+ V% P

* e/ S/ j: t5 g5 J; ^8 Y3 q
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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