table中,文字一行,溢出隐藏省略号写法
来源:互联网 发布:dota2数据分析师 编辑:程序博客网 时间:2024/05/16 09:53
table中文字一行溢出隐藏无效的解决办法。
平时,我们给标签固定宽度,再加上如下属性,即可实现文字一行、溢出隐藏省略号的效果
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
在table中,要实现这一效果也是这样的,今天我第一次写的时候竟然无效,想了一下,解决办法如下:
思路:
1. 我们一定要遵循属性使用的条件:标签固定宽度、再加上三个属性设置
2. 在table中,表格一般都是自适应的,我们要固定宽度才能实现这个效果。
方法:
table标签必须有确定的宽度:table的width必须有固定的值
th或td必须有固定的宽度:给table设置 table-layout:fixed;(固定列宽,当然我们在这个前提下也可以随意设置每列的宽)
再使用三个属性,即可达到目标。
代码如下:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格省略号</title><style>table{border-collapse: collapse;width: 600px;table-layout: fixed;}th,td{border: 1px solid #333;}td{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style></head><body><table><thead><tr><th class="name">姓名</th><th class="sex">性别</th><th class="age">年龄</th><th class="introduction">简介</th></tr></thead><tbody><tr><td>熊大</td><td>男</td><td>8</td><td>熊大是光头强中的一个角色熊大是光头强中的一个角色熊大是光头强中的一个角色</td></tr><tr><td>熊二</td><td>男</td><td>6</td><td>熊二是光头强中的一个角色熊二是光头强中的一个角色熊二是光头强中的一个角色</td></tr></tbody></table></body></html>
阅读全文
1 0
- table中,文字一行,溢出隐藏省略号写法
- 页面中一行字:文字溢出显示省略号
- 文字溢出隐藏显示省略号
- 表格和div中文字溢出隐藏加省略号
- 设置table表格文字溢出显示省略号
- html/css文字超出隐藏写法、省略号
- 文本多行最后一行溢出隐藏显示省略号
- css一行文字多余的部分省略号隐藏的解决办法
- 文字溢出添加省略号
- 文字溢出省略号显示
- 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号
- 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号 .
- table不让td中文字溢出操作方法
- table内容溢出显示省略号
- 溢出文字自动加省略号
- css文字溢出显示省略号
- CSS3文字溢出显示省略号
- CSS 文字溢出 变成省略号
- 静态方法与实例方法的区分
- 队列操作 出队与入队
- javaEE 之学习路线
- linux 中通过shell在crontab定时任务添加任务
- web渗透—SQL注入思路
- table中,文字一行,溢出隐藏省略号写法
- Eclipse中Maven工程缺少Maven Dependencies
- plsql 导出表和表数据
- 装饰者设计模式,Debug之后可以加深理解
- [DP] BZOJ1801: [Ahoi2009]chess 中国象棋
- Unity3D整合到iOS工程
- 从零开始实现Kmeans聚类算法
- sql在MySQL中的使用
- java单例模式