搜索
查看: 1030|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
; w8 B3 d+ }5 _$ A- V/ P4 ?$ b1 R$ T' }
7 ]6 M# S2 z9 j1 _, ^: `用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。, N/ k6 A8 }5 h( n  |0 Z
  1. overflow: hidden;
    6 w/ c* f$ j$ X% Y5 ?1 F% Y' Q: n& [
  2. text-overflow:ellipsis;
    7 K4 [" B$ o+ L' ]& x! ?- J
  3. white-space: nowrap;
复制代码
( L9 d$ ]$ Y5 F: C9 S# n, d1 S
3 X2 d, ^# Q8 ?' l# l2 B
$ {: G9 ]+ G, w5 p
2、多行文本溢出显示省略号…

* j9 y, ~! D$ V5 e6 Z# x7 }" t* {; D8 K+ z2 O# o, X
. z, F4 G, v: [5 j, j' b& Y! _
  1. display: -webkit-box;: H1 `$ k- @8 ?$ c* y* F, A: R# d6 }
  2. -webkit-box-orient: vertical;
    7 b3 p0 X6 `  ~( S) @
  3. -webkit-line-clamp: 3;- a, b6 c; F: }/ f2 E! @9 a: Q0 P  {
  4. overflow: hidden;
复制代码

4 O1 _3 m5 V8 |6 d9 J注意:% j# h. |8 r8 s# \. ~
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
" h; ?# W# {) U. v  e0 Cdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。2 F  U" T8 D4 |* {+ {2 d/ T) r! ?
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式. G6 _* o4 c/ s& ~# [

0 H  J' i- E8 {" z2 H: o2 V
# _( ]! K) P/ Y$ v' J- M3 G
  m2 t. d: S4 t+ ^& J# z4 G+ W4 M+ |5 ]# F" w& ?2 G
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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