搜索
查看: 5208|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
5 z1 v" S& L. N5 l3 d* I- A
( U( b. G. ^- f+ ~; K用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。7 `. @( s8 C; L& e. n2 t( Q$ C& E  o
  1. overflow: hidden;
    # L0 L% ?* G. l6 C8 y( I
  2. text-overflow:ellipsis;6 n$ }1 R/ B# c6 @
  3. white-space: nowrap;
复制代码

8 |* H# ?. `. c& x  E: V/ Y, Z) g8 X( E" t/ u  [3 W9 e8 Q8 U  a& l
4 E, A9 }- Y: ?& ]& Q
2、多行文本溢出显示省略号…

& L& L! @' C/ D2 [" U9 e$ h0 ^. @% E' K: V8 ?) z+ p" C

+ X& N( s- Z$ v4 t9 ^& T& V0 q4 i
  1. display: -webkit-box;. ^, C4 ~+ W9 a: V7 b' h  e$ A1 J
  2. -webkit-box-orient: vertical;
    , l! Z; ~" \+ u( `2 L  W6 ^" u
  3. -webkit-line-clamp: 3;  C8 x& p- ~! {2 S- M
  4. overflow: hidden;
复制代码

5 o8 g! z1 a, B& J: u注意:
$ v* C9 Z; d3 Y# \' V1 [-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:3 j" Z. t2 u7 a+ l( y; E/ G
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
" u( P+ `* s1 ]9 l; R9 C-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
0 e) r! k. K) G6 y, e* M# e4 m, O+ T" @1 e

/ W/ R# U; d+ m& R% S' c9 J! C" a/ s' W. T

- ~/ t3 ?9 O: C; c% C5 Z$ k! A, G
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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