html表格 <td> 文字过多需要隐藏的正确方法
来源:互联网 发布:国际关系学院知乎 编辑:程序博客网 时间:2024/06/04 19:46
表格<td>中文字过多需要隐藏文字
正确的做法
一.强制文字不换行,并隐藏多余部分
CSS 代码
div{width:100px;overflow:hidden;white-space:nowrap;}
td{width:100px;overflow:hidden;white-space:nowrap;word-break:keep-all;}
HTML 代码
<div>中华人民共和国中华人民共和国</div>
<table>
<tr>
<td><div>中华人民共和国中华人民共和国</div></td>
</tr>
<tr>
<td>中华人民共和国中华人民共和国</td>
</tr>
</table>
全部 OK。可以看出 td 比 div 多一个 word-break:keep-all; //只能在半角空格或连字符处换行。。这是由于 IE 中,对 td 的解释与 Firefox、Chrome 的不同,若不加的话,IE 中第三行仍然会转到下一行,而不是截断。具体请参见兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行。
二.设置宽高使用滚动条隐藏多余部分
<style type="text/css">#longer{height:80px;overflow:auto;word-break: normal;}#long{overflow:hidden;word-break: normal;}</style>
html:
<td class="text-left" id="long"><div id="longer"> 文章标签(添加Tag,你的内容能被更多人看到)我们为什么要打Tag?......</div></td>
以上样式用到的知识点:
CSS3 word-break 属性
实例
在恰当的断字点进行换行:
p.test {word-break:hyphenate;}
定义和用法
word-break 属性规定自动换行的处理方法。
提示:通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。
语法
word-break: normal|break-all|keep-all;
CSS overflow 属性
CSS 参考手册
实例
设置 overflow 属性:
div { width:150px; height:150px; overflow:scroll;
}
浏览器支持
所有主流浏览器都支持 overflow 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
可能的值
CSS white-space 属性
CSS 参考手册
实例
规定段落中的文本不进行换行:
p { white-space: nowrap
}
浏览器支持
所有浏览器都支持 white-space 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
定义和用法
white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
可能的值
- html表格 <td> 文字过多需要隐藏的正确方法
- 隐藏td中过多字符串的显示
- HTML 文字过多隐藏演示省略号
- 隐藏表格td的线框
- html中有亲和力的文字隐藏方法
- 隐藏表格<TD>
- HTML:table中的td文字隐藏并实现hover显示全部文字
- html td文字垂直对齐
- html table td隐藏边框
- HTML中,表格中禁止换行,td的nowrap属性
- HTML table的td内容过长时,自动隐藏效果
- css隐藏文字的方法
- 表格td中的文字居左显示
- td的内容隐藏
- 表格td超出部分隐藏,显示...
- 如何隐藏HTML表格的四个边框
- css table td 文字过长隐藏
- html 鼠标悬浮,显示隐藏的文字
- MITgcm 编译安装测试说明
- Python:input输入中文,print输出乱码
- DAO模式中的实体类
- 数据模型的三要素
- 【实用手记】Linux如何设置在当前目录下打开终端
- html表格 <td> 文字过多需要隐藏的正确方法
- Oracle 计算两个时间的差值
- 线程实现交替任务
- Ubuntu 查看磁盘空间大小命令<转>
- IOS 系统自带的分享功能之 UIActivityViewController
- 什么是句柄?指针和句柄的区别
- 【RPC】你应该知道的 RPC 原理
- 三个线程顺序打印ABC
- Java去除数组中重复元素的两种实现