设为首页
收藏本站
首页
BBS
BBS
服务
聊聊技术,说说经验
娱乐
站务
分享
Share
搜索
本版
帖子
用户
登陆
注册
»
BBS
›
服务专区
›
IT技术
›
css设置当字数超过限制后以省略号显示... ...
返回列表
查看:
3290
|
回复:
0
[网站]
css设置当字数超过限制后以省略号显示...
[复制链接]
happyxp
happyxp
当前离线
积分
20330
发表于 2023-11-16 22:21:20
|
显示全部楼层
|
阅读模式
1、文字超出一行省略,超出部分显示…
. k9 ~6 k% ` `7 o0 m
) k9 T7 L. _8 L i( l1 t& L" L5 V6 H
用text-overflow:ellipsis,需要加宽度width属来兼容部分浏览。
A& Z; P8 j. T/ T+ I* R
overflow: hidden;
3 ?+ n. C i7 m1 A5 e
text-overflow:ellipsis;
2 B& S: {; V" ]( B" O
white-space: nowrap;
复制代码
`- I- R8 ~5 Z# _* A
) C7 C2 E9 z' I
; F3 {# v2 G1 F
2、多行文本溢出显示省略号…
7 _7 o- G& ?/ j% n3 t; e$ ?
5 @" ~6 F1 y8 v+ L3 Z5 c. b
! m4 _4 g1 ?; |0 w% w- W& w# Y
display: -webkit-box;
1 G3 P2 p0 T' U. V4 \
-webkit-box-orient: vertical;
8 G M5 K+ \7 C, @0 U3 a3 I
-webkit-line-clamp: 3;
8 W" w2 E2 w" T0 W" [) g
overflow: hidden;
复制代码
$ P4 _/ d- B6 X# O& g6 f2 y" i* A
注意:
% G0 W/ a% O7 @5 e U
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
2 f4 u" H5 o- i1 j& b
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
% B. ^4 w7 Y, r6 k8 o
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
2 m9 O. ~& K+ {2 y! M6 G7 R
3 A) P; d, g6 i5 z2 O3 y* j* w
! A& N( p/ G; n* W; v2 j& H
9 U! E5 v, q5 y9 l' j
- o) t; z2 C$ @- [/ N4 N
回复
使用道具
举报
千斤顶
显身卡
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
注册帐号
本版积分规则
发表回复
回帖后跳转到最后一页
热议作品
windows IIS服务器中asp php asp.net网站如
12
Win10正版重做系统之后出现未激活如何解决
11
win10 win8 win7不显示图片缩略图怎么办
10
dede织梦前台显示产品后台管理空白没有数据
10
精华帖子排行
1
关于蜗牛星际NAS折腾的一些文章
蜗牛星际:我集齐了ABCD款,折腾矿渣一个月的全记录! https://post.smzdm.com/p/a25r
查看全文
2
skype提示遗憾的是,您的链接有问题。请检
今天在使用skype给客户做网页链接的时候出现提示:遗憾的是,您的链接有问题。请检查
查看全文
3
css设置当字数超过限制后以省略号显示...
1、文字超出一行省略,超出部分显示… 用text-overflow:ellipsis,需要加宽度width属
查看全文
4
怎样把多个文件夹里的文件合并到一个文件夹
从网上下载下来的文件有的时候会有很多文件夹,然后一个文件夹里一个文件,要看的话
查看全文
5
打印机SHARP AR-M160 PCL6打印文件出现USER
打印机SHARP AR-M160 PCL6在打印文件前先出一份显示USE NAME,FILE NAME,From and Prin
查看全文
6
如何解决Win10打印机共享0x00000709错误_wi
今天同事的打印机突然无法使用,打印提示找不到打印机,从局域网里直接打开共享打印机
查看全文
7
Windows 11/10修复创建TLS客户端凭据时发生
Windows 11/10修复创建TLS客户端凭据时发生致命错误"内部错误状态为10013" 升
查看全文
8
VMware Workstations Pro可能无法正常工作
Windows更新导致VMware Workstation无法运行??? 问题: 最近微软发布的更新补丁导
查看全文
9
b550主板相比b450主板提升大吗?B450和B550
从命名来说,B550是B450的升级版,那么b550主板相比b450主板提升大吗?下面蛇皮社区分
查看全文
10
Beyond Compare 提示错误“这个授权密钥已
错误提示:这个授权密钥已被吊销。解决方法:删除以下目录中的所有文件即可。win(窗
查看全文
精彩推荐
怎样把多个文件夹里的文件合并到一个文件夹
从网上下载下来的文件有的时候会有很多文件夹,然后一个文件夹里一个文件,要看的话
查看详细
VMware Workstations Pro可能无法正常工作
Windows更新导致VMware Workstation无法运行??? 问题: 最近微软发布的更新补丁导
查看详细
Win10 SysMain服务是什么?SysMain能不能禁
在Win10升级到Win10 1809之后的版本之后,服务中多了一个SysMain服务,相信很多朋友都
查看详细
Surface/surface book 充电器接口定义
Surface 系列包括 Surface PRO2, PRO3, PRO4,NewPRO,Surface Book, Surface Book2, Su
查看详细
Win10 3月份更新可导致蓝屏 微软已确认(附
每个月的第二个星期二是微软的补丁日,3月份是3月9日发布的,然而这些新补丁又给大家
查看详细
返回顶部
返回列表