表单元宽度 – 固定宽度，包装/截断长词
我有一个包含不同长度文本的单元格的表格。 所有表格单元的宽度是相同的。 如果这意味着截断冗长的单词或者用长单词强行突破，那就没问题了。
我想不出有什么办法让这个工作。
这是用于内部客户端应用程序，因此只需要在IE6和IE7中工作。
下面是一个示例页面。 包含一个onereallylongword长字的单元是违规的单元。
<!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> <style type="text/css"> td { width: 30px; } </style> </head> <body> <table border="2"> <tr> <td>word</td> <td>two words</td> <td>onereallylongword</td> </tr> </table> </body> </html>
Stack Overflow通过使用DIV和overflow-x:auto解决了长行代码的类似问题。 CSS不能为你分解单词。
只要你修改了表格本身的宽度并设置了table-layout属性，这很简单：
<!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> <style type="text/css"> td { width: 30px; overflow: hidden; } table { width : 90px; table-layout: fixed; } </style> </head> <body> <table border="2"> <tr> <td>word</td> <td>two words</td> <td>onereallylongword</td> </tr> </table> </body> </html>
我已经在IE6和7testing这个，它似乎工作正常。
如果你想在新行中正确包装长文本然后在你的表中ID调用使用CSS属性table-layout:fixed; 否则简单的CSS不能在新的行中打破长文本。
尝试这个：
text-overflow: ellipsis; overflow: hidden; white-space:nowrap;
我意识到你需要一个IE6 / 7的解决scheme，但我只是把它扔给其他人。
如果你不能使用table-layout: fixed和你不关心IE <9这适用于所有的浏览器。
td { overflow-x: hidden; overflow-y: hidden; white-space: nowrap; max-width: 30px; }
<style type="text/css"> td { word-wrap: break-word;max-width:50px; } </style>
尝试td {background-color:white}
它只适用于我不想被前一列的长文本踩到的列。
