我想包装一些添加到<td> 元素的文本。
我试过style="word-wrap: break-word;" width="15%"。
但它没有包装文本。是否必须给它 100% 宽度？
我还有其他控件要显示，所以只有 15% 的宽度可用。
【问题讨论】：
或 ？另外，当您说它没有换行时，我认为当文本长度超过表格宽度的“15%”时，您会看到 TD 的宽度扩大？
标签： html css html-table word-wrap
我的解决方案是在文本想要换行的列中添加以下内容：white-space:normal
Chrome 和 Firefox 中的行为相同。
注意： 我在使用 Vue/Quasar q-table 时遇到了这个问题。 我通过 css/sass 限制了列的最大宽度（不确定这对于 Quasar 的 q-table 是否正确）。
【讨论】：
我的一些tds 有：
white-space: pre;
这为我解决了：
white-space: pre-wrap;
【讨论】：
使用word-break 可以不使用table 到table-layout: fixed 的样式
table {
width: 140px;
border: 1px solid #bbb
}
.tdbreak {
word-break: break-all
}<p>without word-break</p>
<table>
<tr>
<td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
</tr>
</table>
<p>with word-break</p>
<table>
<tr>
<td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
</tr>
</table>【讨论】：
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Poem</th>
<th>Poem</th>
</tr>
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>
<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
【讨论】：
这对我来说适用于一些 css 框架（material design lite [MDL]）。
table {
table-layout: fixed;
white-space: normal!important;
}
td {
word-wrap: break-word;
}
【讨论】：
这真的很好用：
<td><div style = "width:80px; word-wrap: break-word"> your text </div></td>
您可以对所有 <div 使用相同的宽度，或者在每种情况下调整宽度以在任何您喜欢的地方中断文本。
这样您就不必胡乱使用固定的表格宽度或复杂的 css。
【讨论】：
要使单元格宽度与文本的最长单词完全相同，只需将单元格宽度设置为1px
即
td {
width: 1px;
}
这是实验性的，我在进行反复试验
时了解到这一点【讨论】：
实际上，表格中的文本自动换行。人们在测试时犯的错误是假设一个长字符串，如“gggggggggggggggggggggggggggggggggggggggggggggggg”并抱怨它没有换行。实际上，英语中没有这么长的词，即使有，也有微弱的机会在 <td> 中使用。
尝试使用诸如“在预先确定的情况下对立是迷信的”这样的句子进行测试。
【讨论】：
包装 TD 文本
先设置表格样式
table{
table-layout: fixed;
}
然后设置TD样式
td{
word-wrap:break-word
}
【讨论】：
white-space: normal 才能使包装工作（而不是 word-wrap:break-word）
white-space:normal; 的情况下不会响应
.tbl {
table-layout:fixed;
border-collapse: collapse;
background: #fff;
}
.tbl td {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
【讨论】：
table-layout:fixed 将解决扩展单元的问题，但会创建一个新的。默认情况下，IE 会隐藏溢出，但 Mozilla 会将其呈现在框外。
另一种解决方案是使用：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>
【讨论】：
HTML 表格支持“table-layout:fixed”css 样式，可防止用户代理根据其内容调整列宽。您可能想使用它。
【讨论】：
将类应用到您的 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=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>
【讨论】：
我相信您已经遇到了第 22 条表格。表格非常适合将内容封装在表格结构中，并且可以出色地“拉伸”以满足其包含的内容的需求。
默认情况下，表格单元格会拉伸以适应内容...因此您的文本只会使其更宽。
有几个解决方案。
1.) 您可以尝试在 TD 上设置最大宽度。
<td style="max-width:150px;">
2.) 您可以尝试将您的文本放入一个环绕元素（例如跨度）并对其设置约束。
<td><span style="max-width:150px;">Hello World...</span></td>
请注意，旧版本的 IE 不支持最小/最大宽度。
由于 IE 本身不支持最大宽度，如果你想强制它，你需要添加一个 hack。添加 hack 有多种方法，这只是其中一种。
在页面加载时，仅适用于 IE6，获取表格的渲染宽度（以像素为单位），然后获取其中的 15% 并将其作为宽度应用于该列中的第一个 TD（或 TH，如果您有标题） , 以像素为单位。
【讨论】：
这可能会奏效，但在未来的某个时候（如果不是立即）可能会有点麻烦。
<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> 通常会扩展以适应内容，而<span> 可以给定 - 并期望保持 - 设定的宽度； overflow: hidden 旨在但可能不会隐藏会导致 <td> 扩展的内容。
我建议使用 span 的 title 属性来显示可视单元格中存在（或剪辑）的文本，以便文本仍然可用（如果您不希望/不需要人们看到它，那为什么首先要有它，我猜......）。
此外，如果您为 td {...} 定义宽度，则 td 将扩展（或可能收缩，但我对此表示怀疑）以填充其隐含宽度（在我看来，这似乎是 table-width/number-of-cells），一个指定的table-width 似乎不会产生同样的问题。
缺点是用于演示的额外标记。
【讨论】：