CSS 文字溢出部分用省略号代替
1. 单行文字溢出省略
只需添加三行代码即可:
overflow: hidden; /* 超出的文本隐藏 */
text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。 */
white-space: nowrap; /* 文本不换行 */
举例:
CSS
:
.demo {width: 200px;height: 20px;border: 2px solid #000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
2. 多行文字溢出省略
需要添加4
行CSS
代码:
display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-line-clamp: 3; /* 表示显示的行数,不是CSS规范属性 */
overflow: hidden; /* 超出的文本隐藏 */
举例:
CSS
:
.demo {width: 200px;height: 64px;border: 2px solid #000;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
}
CSS 文字溢出部分用省略号代替相关推荐
- css文字与省略号重叠,CSS 文字溢出处添加省略号(示例代码)
兼容火狐.Opera.chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了, 但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错, 当文字或字符超出外层Div的 ...
- li 字多出了省略号_文字溢出自动显示省略号css方法 -
文字样式(Text Style)是一组可随图形保存的文字设置的集合,这些设置可包括字体设置以及特殊效果等.文字样式在不同的软件环境下显示的方式也会不一样.下面就来分享一下html中如何让文字竖排?总结 ...
- li 字多出了省略号_文字溢出自动显示省略号css方法
这次给大家带来文字溢出自动显示省略号css方法,文字溢出自动显示省略号css的注意事项有哪些,下面就是实战案例,一起来看一下. 我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替 ...
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转) html代码: <div> <p><span>CSS Web Design 我爱CSS-Web标 ...
- css文字溢出部分在另一个div显示(代码篇)
css文字溢出部分在另一个div显示 博主博客: 前端代码:html.css(图文混排)文字环绕 - 案例篇 以上就是关于 " css文字溢出部分在另一个div显示(代码篇) " ...
- css文字溢出隐藏为三个点
css文字溢出隐藏为三个点- (1)单行 white-space: nowrap;//不换行 text-overflow: ellipsis;//将文本溢出显示为(-) overflow: hidde ...
- 单行文字溢出隐藏显示省略号
单行文字溢出隐藏显示省略号 1. 让换行的文字强制在一行显示.属性 white-space: nowrap; 2. 溢出的部分隐藏.overflow: hidden: 3. 文字溢出显示用省略号. t ...
- CSS处理文字一行显示,超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug
一.核心代码 注意:text-overflow 必须要搭配 white-space 才能生效 overflow: hidden; /* 文字溢出隐藏 */ white-space: nowrap; ...
- css文字溢出省略号显示
单行文字溢出省略号显示 步骤: 1.强制文字一行显示 white-space: nowrap; 2.溢出部分隐藏起来 overflow: hidden: 3.文字溢出的时候用省略号显示 text-ov ...
最新文章
- 独家|盘点5个TensorFlow和机器学习课程,程序员福利(附资源)
- 计算机网络邮件客户编程,北京理工大学-计算机网络实践-实验4POP3邮件客户程序.docx...
- 如何用Java创建ZIP文档?
- BZOJ 1176([Balkan2007]Mokia-CDQ分治-分治询问)
- vue(2)---computed,watch--2019.5.21学习笔记
- android: 使用 AsyncTask
- 1.3 List集合:ArrayList和LinkedList类的用法及区别
- vue项目统一响应_vue中使用$set实现深入响应式原理
- 函数重载、引用再探、内联函数
- java面试笔试题整理(学习java基础理论最好的资料)_2020Java笔试/面试题(持续收集整理更新)...
- 学习 Kotlin 的 20 个实用资源
- hadoop入门手册5:Hadoop【2.7.1】初级入门之命令:文件系统shell2
- 由jar文件生成jad文件
- 平安普惠系统上线申请表模板
- 吃鸡显示服务器资源不足,Win10系统玩绝地求生提示虚拟内存不足的解决方法教程[多图]...
- java用socket解析16进制数据_浅析Java基于Socket的文件传输案例
- 谷歌浏览器无法使用谷歌翻译解决办法
- 计算机显示适配器禁用了电脑黑屏,Win10电脑禁用集成显卡后黑屏如何解决_Win10系统禁用集成显卡后黑屏解决方案...
- 算法:分治策略和递归1 | 通过迭代来学习递归
- Unable to access ‘https://github.com/**/**/‘: OpenSSL SSL_read: Connection was aborted, errno 10053