HTML TD包装文本
我想包装添加到TD的文本。 我尝试过style="word-wrap: break-word;" width="15%" style="word-wrap: break-word;" width="15%" 。 但是包装没有发生。 100％宽度是强制性的吗？ 我有其他的控件来显示只有15％的宽度可用。
包装TD文本
首先设置表格样式
table{ table-layout: fixed; }
然后设置TD样式
td{ word-wrap:break-word }
HTML表格支持“table-layout：fixed”css风格，用于防止用户代理将列宽调整为其内容。 你可能想要使用它。
我相信你已经遇到了22桌。 表格非常适合用表格结构来包装内容，并且他们在“拉伸”方面做得非常出色，以满足他们所包含内容的需求。
默认情况下，表格单元格将伸展以适应内容…因此您的文本只是使其更宽。
有几个解决scheme。
1.）您可以尝试在TD上设置最大宽度。
<td style="max-width:150px;">
2.）你可以尝试把你的文本放在一个包装元素（例如一个范围）中，并对其设置约束。
<td><span style="max-width:150px;">Hello World...</span></td>
请注意，尽pipe旧版本的IE不支持最小/最大宽度。
由于IE本身不支持最大宽度，所以如果你想强制使用，你需要添加一个黑客。 有几种方法来添加黑客，这只是一个。
在页面加载时，仅对于IE6，获取表格的渲染宽度（以像素为单位），然后获得15％的宽度，并将该宽度作为该列中第一个TD的宽度（或TH，如果有头文件的话） 。
table-layout:fixed会解决扩展的单元格问题，但会创build一个新的。 IE默认会隐藏溢出，但Mozilla会将其渲染到盒子外面。
另一个解决scheme是使用： overflow:hidden;width:?px
<table style="table-layout:fixed; width:100px"> <tr> <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td> <td> test </td> </tr> </table>
.tbl { table-layout:fixed; border-collapse: collapse; background: #fff; } .tbl td { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
这对我来说有一些CSS框架（材料devise精简版[MDL]）。
table { table-layout: fixed; white-space: normal!important; } td { word-wrap: break-word; }
实际上文本的包装自动发生在表格中。 错误的人在进行testing时假设假定像“ggggggggggggggggggggggggggggggggggggggggggggggggggggggg”这样的长string，并抱怨它没有换行。 实际上，英语里没有这么长的词，即使有，也很less有机会在这篇文章中使用。
尝试用“反对在预定的环境中迷信”等句子进行testing。
这可能是有效的，但在将来某个时候（如果不是立即的话）可能会有点麻烦。
<style> tbody td span {display: inline-block; width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */ overflow: hidden; white-space: nowrap; } </style> ... <table> <thead>...</thead> <tfoot>...</tfoot> <tbody> <tr> <td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td> </tr> </tbody> </table>
正如其他人所指出的， span的基本原理是， <td>通常会扩展以容纳内容，而a可以被赋予并且预期保持一定的宽度。 overflow: hidden意在但不可能隐藏会导致<td>展开的内容。
我build议使用跨度的title属性来显示在视觉单元格中存在（或剪切）的文本，以便文本仍然可用（如果你不想/需要人们看到它，那么为什么它首先，我猜…）。
另外，如果你为td {...}定义一个宽度，td将会扩展（或者可能是契约，但是我怀疑它）来填充它的隐含宽度（因为我认为这似乎是table-width/number-of-cells ），指定的表格宽度似乎不会产生同样的问题。
缺点是用于演示的附加标记。
要使单元格的宽度与文本的最长单词完全相同，请将单元格的宽度设置为1px
即
td { width: 1px; }
这是实验性的 ，我在做试错的时候才知道这个
现场小提琴： http : //jsfiddle.net/harshjv/5e2oLL8L/2/
将类应用到你的TD，应用适当的宽度（记住留下其中的一个没有宽度，所以它假定宽度的其余部分），然后应用适当的样式。 将下面的代码复制并粘贴到编辑器中，然后在浏览器中查看它的function。
<!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=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- td { vertical-align: top; } .leftcolumn { background: #CCC; width: 20%; padding: 10px; } .centercolumn { background: #999; padding: 10px; width: 15%; } .rightcolumn { background: #666; padding: 10px; } --> </style> </head> <body> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="leftcolumn">This is the left column. It is set to 20% width.</td> <td class="centercolumn"> <p>Hi,</p> <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p> <p>Need help.</p> <p>TIA.</p> </td> <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td> </tr> </table> </body> </html>
这真的很好：
<td><div style = "width:80px; word-wrap: break-word"> your text </div></td>
您可以对所有的<div使用相同的宽度，或者在每种情况下调整宽度以随心所欲地打破文本。
这样你就不必用固定的表格宽度或者复杂的CSS来玩笑了。
