在 <td> 标签中换行
Posted
技术标签:
【中文标题】在 <td> 标签中换行【英文标题】：Wrap text in <td> tag 【发布时间】：2010-11-06 15:40:35 【问题描述】：我想包装一些添加到<td> 元素的文本。
我试过style="word-wrap: break-word;" width="15%"。
但它没有包装文本。是否必须给它 100% 宽度？
我还有其他控件要显示，所以只有 15% 的宽度可用。
【问题讨论】：
您使用的是什么 html？是或 ？另外，当您说它没有换行时，我认为当文本长度超过表格宽度的“15%”时，您会看到 TD 的宽度扩大？
我的 HTML 有我的解决方案是在文本想要换行的列中添加以下内容：white-space:normal
Chrome 和 Firefox 中的行为相同。
注意： 我在使用 Vue/Quasar q-table 时遇到了这个问题。 我通过 css/sass 限制了列的最大宽度（不确定这对于 Quasar 的 q-table 是否正确）。
【讨论】：
在这种情况下，大多数声音的解决方案不起作用。【参考方案2】：我的一些tds 有：
white-space: pre;
这为我解决了：
white-space: pre-wrap;
【讨论】：
【参考方案3】：使用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>【讨论】：
唯一没有完全破坏单元格尺寸和文本对齐方式的解决方案——谢谢【参考方案4】：<!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>
【讨论】：
【参考方案5】：这对我来说适用于一些 css 框架（material design lite [MDL]）。
table
table-layout: fixed;
white-space: normal!important;
td
word-wrap: break-word;
【讨论】：
【参考方案6】：这真的很好用：
<td><div style = "width:80px; word-wrap: break-word"> your text </div></td>
您可以对所有 <div 使用相同的宽度，或者在每种情况下调整宽度以在任何您喜欢的地方中断文本。
这样您就不必胡乱使用固定的表格宽度或复杂的 css。
【讨论】：
您可能打算改用 CSS，但在现代 HTML 中通常避免使用内联样式，尤其是当您为每个复制的 div 一遍又一遍地重复相同的样式时。【参考方案7】：要使单元格宽度与文本的最长单词完全相同，只需将单元格宽度设置为1px
即
td
width: 1px;
这是实验性的，我在进行反复试验
时了解到这一点现场小提琴：http://jsfiddle.net/harshjv/5e2oLL8L/2/
【讨论】：
【参考方案8】：实际上，表格中的文本自动换行。人们在测试时犯的错误是假设一个长字符串，如“gggggggggggggggggggggggggggggggggggggggggggggggg”并抱怨它没有换行。实际上，英语中没有这么长的词，即使有，也有微弱的机会在 <td> 中使用。
尝试使用诸如“在预先确定的情况下对立是迷信的”这样的句子进行测试。
【讨论】：
这是正确的。无法理解为什么人们建议使用“white-space:nowrap”，因为这与 OP 想要的完全相反。 更正没有这么长的英文单词，但假设我正在显示一个文件路径，它将是连续的并且很长。 ..或者一个长的逗号分隔的数字列表，例如不幸的是没有空格。 .. 或一个最长 63 个字符的域名（扩展名和 www 除外）http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/ 当“word”是一个很长的 url 时，我正在尝试解决这个问题。上面带有示例“gggggggggggggggggggggggggggggggggggggggggggggggg”的评论没有考虑长网址。【参考方案9】：包装 TD 文本
先设置表格样式
table
table-layout: fixed;
然后设置TD样式
td
word-wrap:break-word
【讨论】：
我想它没有被接受，因为它在 chrome 中不起作用...... :-( webkit 的任何解决方案？ 在 Chrome 中非常适合我。 有趣...在 Chrome 中，我必须在 td 样式中使用white-space: normal 才能使包装工作（而不是 word-wrap:break-word）
我可以确认我对吉姆的回答有同样的经历。由于某种原因，Chrome 在没有 white-space:normal; 的情况下不会响应
对于 Firefox 也是如此。 white-space: normal 是我在 TD 中包装文本所需要的。【参考方案10】：
.tbl
table-layout:fixed;
border-collapse: collapse;
background: #fff;
.tbl td
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
感谢http://www.blakems.com/archives/000077.html
【讨论】：
【参考方案11】：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>
【讨论】：
【参考方案12】：HTML 表格支持“table-layout:fixed”css 样式，可防止用户代理根据其内容调整列宽。您可能想使用它。
【讨论】：
我已经尝试过这个解决方案，但它似乎不适用于 Chrome。我有一个表格，该表格正在动态填充一个超过单元格宽度两倍的超链接。 'table-layout:fixed' 解决了表格拉伸的问题，但不换行；相反，它继续延伸到页面的右侧。我错过了什么吗？【参考方案13】：将类应用到您的 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;" . 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>
【讨论】：
我相信 OP 虽然没有明确说明，但在包装非空格动态内容方面存在问题。在这种情况下，上述解决方案将不起作用 - jsfiddle.net/qZrFW【参考方案14】：我相信您已经遇到了第 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，如果您有标题） , 以像素为单位。
【讨论】：
我有两种方式。但无法换行文本。我正在使用 IE6.0 啊，IE6。这增加了复杂性。我将使用 IE6 hack 修改我的答案。【参考方案15】：这可能会奏效，但在未来的某个时候（如果不是立即）可能会有点麻烦。
<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 似乎不会产生同样的问题。
缺点是用于演示的额外标记。
【讨论】：
以上是关于在 <td> 标签中换行的主要内容，如果未能解决你的问题，请参考以下文章