搜索
查看: 4244|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…9 N" c$ C9 {. r2 z1 o& }
8 y$ _7 }+ y2 w  b1 T% L7 N# X: @
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。* f6 ^1 @3 x, f0 M
  1. overflow: hidden;
    ! c8 E; v' Z6 B& m
  2. text-overflow:ellipsis;! o" b3 R, U# V# S! e- B
  3. white-space: nowrap;
复制代码

" V# J. Y4 j6 v3 w
' y) J8 g% d3 S* m

, g" u$ S' J4 f! X0 t, Q% B2、多行文本溢出显示省略号…

: W* [0 r* \  v' p: y0 p2 N% ~) a8 ^  y" O; M0 a3 l. b5 y& k

$ {9 V; R2 {2 q: ~
  1. display: -webkit-box;
    : z/ o. h; w  r. O- n
  2. -webkit-box-orient: vertical;7 I/ Q8 |- b0 g0 D/ X/ R$ ~* c
  3. -webkit-line-clamp: 3;
    % v8 A2 s2 i- t( H3 U& u
  4. overflow: hidden;
复制代码

! d: d, e9 x( E* \- `+ @# m注意:# u; |1 S# k  e# X
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
4 V- u8 g, k8 Z2 y+ @5 |1 Mdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
0 T' _5 b# A+ C-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式2 I* B9 h0 G/ Z7 p7 U. P2 e+ h

6 q& C. f/ M# ?% C8 ^7 I
, F- x6 \$ @; P2 g5 u' S9 b+ K$ z- C- @& ^; W# U( n1 N$ ~
1 v% Y5 S% E( v; r( O& A
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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