搜索
查看: 5150|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…7 i7 T/ W; q9 K
. p1 K: ~7 I) R
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
( Y, N# O# \* [$ G. z
  1. overflow: hidden;
    - ?4 y. U5 M1 o" l( g7 f) d
  2. text-overflow:ellipsis;
    # g& z+ v5 R+ Q- N; n3 Q4 L) N5 S7 i  _
  3. white-space: nowrap;
复制代码

# u/ L+ f: l7 |& u7 ^4 Z9 M. ]  ^, y2 _& E" H
7 |' ?) ?2 B! @* z; ^
2、多行文本溢出显示省略号…
! Q$ B% U$ L: y+ f6 r( P
0 T3 Q3 t9 S/ l) \8 V8 m& F

5 k4 E! g8 ]0 t' X% h
  1. display: -webkit-box;
    , ~! x6 F7 v: G1 P! A
  2. -webkit-box-orient: vertical;% |) }; ]: L7 c0 t; T0 j( B1 S' _
  3. -webkit-line-clamp: 3;
    % g6 `3 T4 B) q! ]8 F7 g
  4. overflow: hidden;
复制代码
- T' P$ S% |( E3 M3 ]8 ?
注意:
1 ~  T) S. u# n2 v) m$ Y" E1 ]  x/ a- u-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:* P) [4 x, q: r- m3 ^
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
3 ^% h# |3 w$ T6 H" X6 v5 d-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式. {+ I9 i# Z, w: X" \

  f$ u7 x7 A7 k* g; |. I( C, C7 x) D9 W6 D5 o3 n
  _$ J4 @5 T3 b6 _
6 |1 x7 q9 T; X0 g1 g" F  v
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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