搜索
查看: 5551|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…# [5 R" |* H$ p1 U" `2 k' K/ A

( \4 f9 N; A& g, T7 C4 d! s- D用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
) O% u, d* v. p) n7 A
  1. overflow: hidden;& L+ l; I& K5 I# T, n/ f
  2. text-overflow:ellipsis;; D( b, }& i1 P; a# U0 r& g9 j
  3. white-space: nowrap;
复制代码

1 e; r& k1 ]  Z4 u, F, V. e1 l3 l3 Y5 `
. W% D9 \1 c" @" N4 Z
2、多行文本溢出显示省略号…

( g; C. T. a$ _: R( c- M+ ?/ F% p5 h: m& |8 Y; ?3 c
0 b# T( H5 f: Y9 [: M$ A* S2 ^
  1. display: -webkit-box;
    " H$ h! W& _4 o
  2. -webkit-box-orient: vertical;# u" |7 }  c. h  |9 f* m: H+ N
  3. -webkit-line-clamp: 3;, s$ `4 `! H- h, G: l
  4. overflow: hidden;
复制代码

3 u. u0 |  w" c$ C$ `; }注意:
0 W6 X0 K6 C: }1 w: F% c0 ?-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
+ w: ^$ T+ R8 Ndisplay: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
9 L0 T* W* b. |) U- G- T% U' g! G-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
0 O0 a0 p4 E% z/ t+ k. J, q# A8 h- g: m7 P# O2 I4 H5 l; M

7 q; e' D, a: G) ~$ y. x6 B+ Y" R! G( e" Y9 s7 g
" L% F/ N) E' u# N+ T
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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