[转]对 td 使用 overflow:hidden; 无效的几点错误认识
2014-07-22 12:11
302 查看
转载:http://www.cftea.com/c/2010/12/UVBUCD0J888L2XPQ.asp
一、是 td 的原因。
其实这关 td 什么事呢?div 也是一样的,看示例:
<div style="width:100px;overflow:hidden;">中华人民共和国中华人民共和国</div>
并没有直接截断,而是出现了换行。所以跟 td 无关,而是受内容的影响。
二、td 中多套一层标签(比如 div),table 指定 table-layout:fixed。
<table style="table-layout:fixed;"> <tr> <td style="width:100px;overflow:hidden;white-space:nowrap;"><div>中华人民共和国中华人民共和国</div></td> </tr> <tr> <td>中华人民共和国中华人民共和国</td> </tr> </table>
前面说了,这个 overflow 跟内容有关,而跟是不是 td 没关系,所以以上做法也是行不通的。
三、使用 white-space:pre;。
这个是错误的,输出内容会照源码输出,比如源码中“中”和“国”之间换行了,但没有任何标签,那么输出时也会显示在两行,而 HTML 中,默认 <br /> 才会换行,与实际需求不符。
正确的做法
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 的强制不换行及强制换行。
一、是 td 的原因。
其实这关 td 什么事呢?div 也是一样的,看示例:
<div style="width:100px;overflow:hidden;">中华人民共和国中华人民共和国</div>
并没有直接截断,而是出现了换行。所以跟 td 无关,而是受内容的影响。
二、td 中多套一层标签(比如 div),table 指定 table-layout:fixed。
<table style="table-layout:fixed;"> <tr> <td style="width:100px;overflow:hidden;white-space:nowrap;"><div>中华人民共和国中华人民共和国</div></td> </tr> <tr> <td>中华人民共和国中华人民共和国</td> </tr> </table>
前面说了,这个 overflow 跟内容有关,而跟是不是 td 没关系,所以以上做法也是行不通的。
三、使用 white-space:pre;。
这个是错误的,输出内容会照源码输出,比如源码中“中”和“国”之间换行了,但没有任何标签,那么输出时也会显示在两行,而 HTML 中,默认 <br /> 才会换行,与实际需求不符。
正确的做法
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 的强制不换行及强制换行。
相关文章推荐
- Html table td里使用overflow:hidden无效解决方法
- td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效,英文 数字 不换行 撑破div容器
- td中使用overflow:hidden; 无效解决方案
- realloc 使用详解(分析realloc invalid pointer、指针无效等错误)
- IE 6下overflow:hidden无效的问题
- sys用户使用@连接符提示无效权限的错误ORA-01031:
- ServiceMix 中使用file组件时出现无效的property的错误问题的解决
- MS SQL Server 2000 数据库使用备份还原造成的孤立用户和对象名‘xxx’无效的错误的解决办法
- overflow:hidden在ie6 7下无效 ..尼玛,纠结了好半天原来是这么回事。。
- ie8 body overflow hidden 无效的解决方法
- firefox提示 内容编码错误 无法显示您尝试查看的页面,因为它使用了无效或者不支持的压缩格式。
- WPF (当 ItemsSource 正在使用时操作无效。改用 ItemsControl.ItemsSource 访问和修改)错误解决方案
- SQL Server 数据库使用备份还原造成的孤立用户和对象名‘xxx’无效的错误的解决办法
- 使用NHibernate的时候出现“指定的转换无效”的错误
- 使用NHibernate出现错误"此SqlParameterCollection 的 Count=71 的索引 71 无效"
- 关于对J2EE几点误解和错误认识的澄清
- 使用overflow:hidden防止框架被撑破
- 解决dev express quantumgrid v6.30使用中出现'Overflow while converting variant of type(Integer) into type(Date)'的错误
- SQL Server 数据库使用备份还原造成的孤立用户和对象名‘xxx’无效的错误的解决办法
- 名称或代码在系统中已被使用" (错误代码:3604 E14H) Fdetail:列名'F3001'无效