css3 属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
发布日期:2021-06-30 22:42:26
浏览次数:3
分类:技术文章
本文共 1075 字,大约阅读时间需要 3 分钟。
css3 属性 text-overflow: ellipsis
前言
- 公众号:前端印象
- 不定时有送书活动,记得关注~
- 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】
我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替,类似这样的效果:
做到这样的效果,我们需要运用两个特殊的样式来实现 text-overflow 和 white-space正文
让我们分别来看一下使用了这些样式,和不使用这些样式的区别吧
- html内容
我是一段测试文本1我是一段测试文本2我是一段测试文本3我是一段测试文本4我是一段测试文本5我是一段测试文本5
1. 不使用特殊样式
- 样式内容
.box{ background: red; width: 100px;}
- 效果展示 我们可以看到,文本根据边框的宽度,自动换行,并且全部显示
2. 使用 white-space: nowrap 样式
- 样式内容
.box{ background: red; width: 100px; white-space: nowrap; /*使文本内容不换行,写在一行*/}
- 效果图 3. 使用white-space: nowrap和overflow:hidden样式
- 样式内容
.box{ background: red; width: 100px; white-space: nowrap; /*使文本内容不换行,写在一行*/ overflow: hidden; /*隐藏多余内容*/}
- 效果图 4. 使用white-space: nowrap和overflow:hidden和text-overflow: ellipsis 样式
- 样式内容
.box{ background: red; width: 100px; white-space: nowrap; /*使文本内容不换行,写在一行*/ overflow: hidden; /*隐藏多余内容*/ text-overflow: ellipsis; /*将多余内容以省略号的方式展示*/}
- 效果图
结束语
希望这篇文章对大家能有所帮助
转载地址:https://lpyexplore.blog.csdn.net/article/details/105898964 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年04月25日 21时01分57秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
如何以正确姿势使用搜索引擎
2019-05-01
CourseGrading 题目解析
2019-05-01
带缓存动态规划计算斐波那契数列
2019-05-01
【周更】个人ctf-re学习list #7
2019-05-01
算法优化初学笔记
2019-05-01
leetcode 860.柠檬水找零 题解 详解
2019-05-01
【周更】个人ctf-re学习list #8
2019-05-01
空vector 空列表 不可迭代
2019-05-01
为什么需要“迭代器“类型
2019-05-01
何时以及为何需要使用.ignore()
2019-05-01
笔记本完全卸载自带键盘
2019-05-01
指向结构体的指针和结构体的常见知识点
2019-05-01
C++ 高效实现逆序遍历
2019-05-01
C++ 多返回值函数的一种实现
2019-05-01
C98标准下实现int转string
2019-05-01
江苏大学 大一绕过选课系统 提前选修高年级课程
2019-05-01
实例化不定数量结构体
2019-05-01
cin.getline()和getline(cin,string)的区别
2019-05-01
DOM(总结)
2019-05-01