搜索
查看: 3946|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
& O( \  ?6 t* s. c; j  {4 h$ f
& U: y4 E$ F- L! u; u用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。, e4 _! ?. M2 K0 A. ?! l
  1. overflow: hidden;
    . ]3 H  G0 ?+ Q
  2. text-overflow:ellipsis;
    ) l) V( i: y* _' @1 _( Y- Q  I
  3. white-space: nowrap;
复制代码
7 E; t; w4 n* Z% x+ u  z$ c- W5 @
! C/ d" x9 o1 n2 e4 Y6 {# c" H
4 ~  x! N! q$ a; P/ a3 b
2、多行文本溢出显示省略号…

1 P) Y1 n0 V. q9 {: Y5 w4 N7 g
& D* w- N5 S% f, v5 F4 u9 j
" {2 U9 e# Y0 T* g
  1. display: -webkit-box;; \$ l3 E5 x5 G- |- y0 }3 Z
  2. -webkit-box-orient: vertical;
    : T4 [! m2 T+ ^. h/ ]
  3. -webkit-line-clamp: 3;
    - M( r  \' z; G, O* Z
  4. overflow: hidden;
复制代码

6 o2 g3 j1 Q- o7 a注意:
3 t. \  t3 A# n1 ~1 s1 N$ c3 v: p-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
; g9 w' A  U/ ]display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。! c/ v  }0 R8 ?2 s* `- }+ c- f  d
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
( Q; t9 ?- ^9 W! r
. w% n4 c6 q* y' [: m8 H0 Q# G& x- v) i9 X$ z
# ?1 t: J3 c0 z$ B' D0 p
9 D' Y$ J4 a5 q7 m4 O# S3 n* H" J# ]
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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