搜索
查看: 5225|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…
+ T; @+ z! c' @6 N; y3 B: p7 L/ I5 s$ Q, Q
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。: u% D0 a8 C& q
  1. overflow: hidden;
    3 l6 q7 \' k6 t& |; I" D
  2. text-overflow:ellipsis;8 s4 a6 Q' h) O3 H. b/ U. p3 I
  3. white-space: nowrap;
复制代码

0 ^. g0 W4 a& r% q* ~( q' a( D1 Q/ j: d+ G0 i+ Q- x

9 ?5 @! U8 H; S! }6 g" y: p2、多行文本溢出显示省略号…
0 |1 w0 \4 c2 b& v6 s. {" @% |

  I% s' r; d& U2 e  |5 S- N2 T* f; `& Z4 J9 d  U
  1. display: -webkit-box;
    ( D) f/ U4 k2 H' S" G; E, d
  2. -webkit-box-orient: vertical;( J( [/ p4 C8 y' P0 ~( y
  3. -webkit-line-clamp: 3;* C* {$ u5 z; X" o1 J+ @( g2 C
  4. overflow: hidden;
复制代码
1 l4 i& ], ~, b1 b& k
注意:
% O9 k. A* Z2 p9 n1 F-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
3 S: x1 p) D4 W% N9 {display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
, ]- E: }, \* }6 c. }/ ?7 W: ]-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式. R# q. A8 W" W; d8 u  v1 n

1 Y" g3 C# ?1 ^5 ?$ y2 O* ~5 z
' s- a- L1 O& [$ O- S* ~7 R
& G4 T7 x1 l5 n% T* z
! H. s- y# K. R% e4 l
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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