搜索
查看: 5168|回复: 0

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

[复制链接]
发表于 2023-11-16 22:21:20 | 显示全部楼层 |阅读模式
1、文字超出一行省略,超出部分显示…* }- o+ y$ ^9 H$ o1 R  l. B
1 w$ C" Z/ W  W6 ^# r5 l
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。8 y+ {! @7 i$ |
  1. overflow: hidden;4 h) \( v1 P( D4 ?$ p$ i
  2. text-overflow:ellipsis;+ M4 c' d4 F3 q: x8 d' X2 \
  3. white-space: nowrap;
复制代码
2 M0 Y* x/ m0 D/ Q/ L% T* a
7 ^9 E) }  p. A: M4 V

7 x$ }) m; I  A, X9 x2、多行文本溢出显示省略号…

* O& s( O4 e" I5 t& a, Z
, Y& H4 f6 @1 i) Q, {
  D1 ]+ Q- {. p% Y% \/ E% l
  1. display: -webkit-box;& g. `3 G5 R0 Z! [
  2. -webkit-box-orient: vertical;7 A+ X# j& g7 ]# Q' k, a, p! W9 |
  3. -webkit-line-clamp: 3;! W* ~0 a2 h9 t7 a+ \9 j
  4. overflow: hidden;
复制代码
$ `! S, y& [" N( {2 Y5 ~
注意:
  H* q* S: {8 W-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:8 J8 ~7 R, [' w# X& H
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
% a: I6 E9 |: {8 ?-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式0 \  @; ^& E$ K1 `; h) ~1 E8 W

" u+ J, o/ u# H9 m: ~5 e! }( ?" O* R7 B& l

; e6 A& c7 K. u' |( F% a3 v2 L: I' |/ c3 T( m7 z6 A
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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