搜索
查看: 4845|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…: G! @1 L2 Z. E

3 q- x' s/ B0 f: F. N7 `用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
0 T  U+ ~2 S0 G7 P3 d7 w% r' C' a
  1. overflow: hidden;6 g! s; B. L0 e! l. V3 b
  2. text-overflow:ellipsis;1 f$ R$ |$ i( `/ C2 H% k% k8 n! p
  3. white-space: nowrap;
复制代码

7 p. m1 g( O6 v. r6 H. }+ C/ I% w3 @5 g

" i' a! F. a! i% G2、多行文本溢出显示省略号…

$ ^" ~6 H) e: W9 ]5 C1 A
; P( |/ G  P8 z! }" p, r; n
$ e# f) H: [' w3 o5 w
  1. display: -webkit-box;6 x3 I6 X$ w/ e& i& W2 d, e
  2. -webkit-box-orient: vertical;
    8 F: R0 G. r% Q0 U9 e
  3. -webkit-line-clamp: 3;
    : Z" R1 Z0 S+ r1 y% I# p7 I- n5 I
  4. overflow: hidden;
复制代码

2 L; l. c6 g" U! b注意:) B$ ]. y, b0 X, d
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
4 t) b' U# s. k' Q7 F: {display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。+ `% s- Z( A( ^& Z: z+ v
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
4 Z5 C# J8 F2 {- z4 j6 |
; d1 ~3 H5 U/ u9 m; Z0 y
! Y) V7 K8 C$ p$ v% C; |* ]4 [9 o9 X- b  b* e  M9 T
2 L, l2 q/ r9 q
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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