只需几个简单的属性,就能实现文本超过容器长度就显示为省略号的效果
p {
width: 100px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}p标签字数过多显示省略号
2022-05-26
754
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
p标签字数过多显示省略号
目录
相关文章
|
12月前
|
前端开发
|
JavaScript
前端开发
|
6月前
|
前端开发
|
12月前
|
Web App开发
存储
弹性计算
|
前端开发
css3 新属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
我们在设计网站的时候有时会遇到这样一个需求：因为页面空间大小的问题，需要将多余的文字隐藏起来，并以省略号代替，类似这样的效果：
做到这样的效果，我们不仅需要运用到css3的新属性 text-overflow
，该属性的作用就是设置一下被隐藏文本的展示形式（例如隐藏文本用……展示），除此之外还需要用到属性 white-space
使文字不换行，以及使用属性 overflow:hidden
隐藏多余的文字
接下来我们就来分步讲解一下这几个属性的应用吧
322
0
0
|
自然语言处理
前端开发
UED
热门文章
最新文章
1
Object reference not set to an instance of an object.
2
Map根据键、值进行排序
3
锐捷网络&视易K米，携手助力2016腾讯全球合作伙伴万人大会
4
Java中的定时器
5
Python正则表达式指南下下半部
6
VirtualDesktop多媒体在何处解码?
7
文件移动脚本
8
xml在此生活
9
在不动用sp_configure的情况下，如何 =》去掉列的自增长，并保留原数据
10
聚焦技术实战！MDCC 2016 移动开发者大会盛大开幕
1
2024Mysql And Redis基础与进阶操作系列（6）作者——LJS[含MySQL 多表之一对一/多；多对多；多表联合查询等详解步骤及常见报错问题所对应的解决方法]
32
2
猫头虎分享：鸿蒙生态带给开发者的全新机遇！轻松实现按需加载与多端适配，开发效率翻倍
30
3
2024Mysql And Redis基础与进阶操作系列（5）作者——LJS[含MySQL DQL基本查询:select；简单、排序、分组、聚合、分组、分页等详解步骤及常见报错问题所对应的解决方法]
25
4
理解 ES6 中的 Promise
26
5
CSS 提高性能的方法
23
6
CSS 预编语言的区别
10
7
如何快速掌握 CSS 预编语言
10
8
对 CSS 预编语言的理解
12
9
利用缓存布局信息来减少回流和重绘的发生
11
10
减少回流和重绘的发生
12