本文共 1368 字，大约阅读时间需要 4 分钟。
在表格中，有时候当表格中的内容多了就会把表格自动加宽、变形等问题。
如果想将超出表格的部分自动隐藏，解决办法如下： 第一种办法：直接隐藏（当文字超出TD宽时，自动隐藏），有个缺点就是可能最后面会出现只显示半个字的情况，印象美观。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> td{border:1px solid #ccc} td span{width:100px; height:200px;display:block;overflow:hidden;white-space:nowrap;word-break:keep-all;} </style> </head> <body> <table > <tr> <td ><span>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测</span></td> <td ><span>测试测试测试测试测试测试测试测试测试测试</span></td> </tr> </table> </body> </html>
第二种办法：当表格中的内容超过设定值时，则自动隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>dw8.cn</title> <style type="text/css"> #yc { width:600px; height:100px; overflow:hidden; } </style> </head> <body> <div id="yc"> <table cellspacing="0" cellpadding="0"> <tr> <td>51UDF 集合当前最热门的PHP开源框架(Discuz、phpwind、Ecshop、DedeCMS、WordPress、HDWiki)进行源代码分析及二 次开发，为广大PHP二次开发爱好者提供一个完美的学习和交流平台。 </td> </tr> </table> </div> </body> </html>
大家不妨复制到本地试试，很实用哦！
本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/925203，如需转载请自行联系原作者