搜索
查看: 5227|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
7 L0 s& f  b; k" }! r
" Y+ [: k& s0 M. ?' w用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
/ z/ O- h" }* {6 U! J: @
  1. overflow: hidden;
    6 g* ^9 ^- I( Y2 b! {
  2. text-overflow:ellipsis;# b8 X: B( M& L4 Y7 A+ o
  3. white-space: nowrap;
复制代码
) o+ ]" ~6 f' E- Z3 H) ]5 z6 z

6 L" l# t5 H2 x) b' s( l
: j/ W1 Z/ z0 [5 _( g, u
2、多行文本溢出显示省略号…

/ |+ M/ @! m+ }( L" f3 X
) a9 o1 ^( }, P/ ]  \/ I( B! V) ], ?' B$ Q) _
  1. display: -webkit-box;
      p4 h# E" I, k. d$ m0 H: c+ }  W) V  v
  2. -webkit-box-orient: vertical;
    1 Y2 U" y& I; Y7 {& \6 @
  3. -webkit-line-clamp: 3;& N& t/ E: ~/ ?+ d
  4. overflow: hidden;
复制代码
% G( p3 X* l4 o$ S% \8 c/ ^
注意:* C# \4 I0 w" [+ c9 @) R
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
$ n$ _2 S3 H9 i9 sdisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
! c: V$ h0 z2 ~% ?8 M3 j; O) m) e-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式( j- o1 A+ a9 P. [0 m4 P% q
8 C0 [* E% v' Y* k) d

8 L! s' j' M" a' a8 g% I( Y: l  v- C) V* R7 T3 Y4 f
% P9 F/ L$ e7 a
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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