搜索
查看: 5080|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…$ Z/ C& Y: y% j' c

, K0 G" K; O: f) n, \用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
3 O. N( S1 j; S, T. r! O
  1. overflow: hidden;) @- l6 j* v0 ]- G+ n
  2. text-overflow:ellipsis;
    $ e; O( v; R  e4 d$ F$ U; }
  3. white-space: nowrap;
复制代码

& E9 H( c  ?8 H$ Z4 W& t8 D7 D  y* @) ?3 L& E( c4 J2 {
' k" D: L; ]. Q% C* i4 o
2、多行文本溢出显示省略号…

+ G. z9 h- T5 G- E8 y% ?& i
/ D- V4 r) o! b/ W
- U1 G, ^* _- Q0 k) H4 b7 B5 l
  1. display: -webkit-box;
    : v2 a$ }' D5 o+ t! l! E# \: Q
  2. -webkit-box-orient: vertical;: C# W# A7 H; z$ L) `; y8 \
  3. -webkit-line-clamp: 3;
    $ O5 |# a; f) Q7 U+ [
  4. overflow: hidden;
复制代码

3 b/ G1 F* Z  R# N注意:+ X' T9 k) }9 T8 [0 S
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:4 u) K+ ?( _6 E) I) z" ^$ b8 p
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
3 |1 ]$ s1 b6 C7 M, J4 k-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式3 S! G& P% D4 p0 V7 h0 l& B6 M

4 d2 j9 F8 x1 `: i% z, C5 Q" Z& r( I, C" ^) R) E9 }8 T

8 L5 O& M7 H/ ^" l* y
/ }' [, h) G! O; B1 T5 p. Q
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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