搜索
查看: 5229|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
* c' H7 T) K" V4 `! G4 a4 ^7 l. N; `
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
! E: H) \  C3 ~" h5 c5 x3 G
  1. overflow: hidden;
    % ]8 {5 i5 f. i# ~# v: x
  2. text-overflow:ellipsis;
    $ s* d- L' j" ^- }) A$ ^  q; J" ?2 m
  3. white-space: nowrap;
复制代码
3 ]& Q0 S. Q6 y0 _

7 H9 Q& K3 h5 X$ j
4 D$ ], c  Z/ o/ t+ }' v, f
2、多行文本溢出显示省略号…

$ m7 W/ _0 `9 c6 K* n  r' d/ V% y! c- B% O* z+ j  ~; L3 r% b9 Q

6 ?8 v* r4 w/ _/ \- @7 O5 N' W
  1. display: -webkit-box;
    ! k2 \: M8 |- @* @8 O
  2. -webkit-box-orient: vertical;* c) \% z+ ^4 O* ^5 }5 w  N& U% W
  3. -webkit-line-clamp: 3;$ ^; E, [1 {* E' u! N0 L- U% e( H# W# w
  4. overflow: hidden;
复制代码

: m" r4 a- w5 I7 K注意:
& h8 S5 i0 s6 x3 _* @' d-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:& i5 D, _5 W2 k
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
$ n9 L, m/ A) J; I) |1 M-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
: M, y" U- K$ ]
) e% F; u- u0 a+ E; M/ {# W6 J" `0 f& U, k4 r2 H) {6 u8 c( W5 k( J8 q' @
7 D$ d2 c9 U/ V  w

6 ^. C( l; c* Y
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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