设为首页
收藏本站
首页
BBS
BBS
服务
聊聊技术,说说经验
娱乐
站务
分享
Share
搜索
本版
帖子
用户
登陆
注册
»
BBS
›
服务专区
›
IT技术
›
css设置当字数超过限制后以省略号显示... ...
返回列表
查看:
4845
|
回复:
0
[网站]
css设置当字数超过限制后以省略号显示...
[复制链接]
happyxp
happyxp
当前离线
积分
20478
发表于 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
overflow: hidden;
6 g! s; B. L0 e! l. V3 b
text-overflow:ellipsis;
1 f$ R$ |$ i( `/ C2 H% k% k8 n! p
white-space: nowrap;
复制代码
7 p. m1 g( O6 v. r6 H. }
+ C/ I% w3 @5 g
" i' a! F. a! i% G
2、多行文本溢出显示省略号…
$ ^" ~6 H) e: W9 ]5 C1 A
; P( |/ G P8 z! }" p, r; n
$ e# f) H: [' w3 o5 w
display: -webkit-box;
6 x3 I6 X$ w/ e& i& W2 d, e
-webkit-box-orient: vertical;
8 F: R0 G. r% Q0 U9 e
-webkit-line-clamp: 3;
: Z" R1 Z0 S+ r1 y% I# p7 I- n5 I
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
回复
使用道具
举报
千斤顶
显身卡
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
注册帐号
本版积分规则
发表回复
回帖后跳转到最后一页
热议作品
windows IIS服务器中asp php asp.net网站如
12
Win10正版重做系统之后出现未激活如何解决
11
windows2008安装phpstudy,apache模式,本
10
win10 win8 win7不显示图片缩略图怎么办
10
精华帖子排行
1
ASPCMS标签
ASPCMS标签教程,经常忘记,记一下,为了使用方便~按ctrl+F 快速查找~ 导航栏调用 {as
查看全文
2
如何关闭360浏览器自动升级
电脑版360浏览器老自动升级,而且升级还容易出问题,如何关闭呢? 首先找到360浏览器
查看全文
3
Ubuntu海纳思安装CUPS打印机服务器
一、安装Cups 1.终端登录root 2.输入apt-get update等待更新 3.输入apt-get install
查看全文
4
win11设置共享打印机时报错0x80004005、0x0
今天碰到一个问题,win10专业版电脑连接打印机做共享主机,win11家庭版直接访问IP地
查看全文
5
如何去掉新版wps提示必须登录才可以使用的
最近给客户重做系统,发现2019版的wps已经到期了无法继续使用,安装了新的wps提示必须
查看全文
6
关于蜗牛星际NAS折腾的一些文章
蜗牛星际:我集齐了ABCD款,折腾矿渣一个月的全记录! https://post.smzdm.com/p/a25r
查看全文
7
skype提示遗憾的是,您的链接有问题。请检
今天在使用skype给客户做网页链接的时候出现提示:遗憾的是,您的链接有问题。请检查
查看全文
8
css设置当字数超过限制后以省略号显示...
1、文字超出一行省略,超出部分显示… 用text-overflow:ellipsis,需要加宽度width属
查看全文
9
怎样把多个文件夹里的文件合并到一个文件夹
从网上下载下来的文件有的时候会有很多文件夹,然后一个文件夹里一个文件,要看的话
查看全文
10
打印机SHARP AR-M160 PCL6打印文件出现USER
打印机SHARP AR-M160 PCL6在打印文件前先出一份显示USE NAME,FILE NAME,From and Prin
查看全文
精彩推荐
怎样把多个文件夹里的文件合并到一个文件夹
从网上下载下来的文件有的时候会有很多文件夹,然后一个文件夹里一个文件,要看的话
查看详细
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日发布的,然而这些新补丁又给大家
查看详细
返回顶部
返回列表