html - 在标签中换行

Question

我想包装一些添加到<td>元素的文本。我试过了style="word-wrap: break-word;" width="15%"。但它没有包装文本。是否必须给它 100% 的宽度？我有其他控件要显示，所以只有 15% 的宽度可用。

score 239 · Accepted Answer

换行 TD 文本

第一组表格样式

table{
    table-layout: fixed;
}

然后设置 TD Style

td{
    word-wrap:break-word
}

score 47 · Accepted Answer

HTML 表格支持“table-layout:fixed”css 样式，可防止用户代理根据其内容调整列宽。您可能想使用它。

score 32 · Accepted Answer

我相信您已经遇到了第 22 条表。表格非常适合将内容包装在表格结构中，并且它们可以出色地“拉伸”以满足它们包含的内容的需求。

默认情况下，表格单元格将拉伸以适应内容......因此您的文本只会使其更宽。

有几个解决方案。

1.) 您可以尝试在 TD 上设置最大宽度。

<td style="max-width:150px;">

2.) 您可以尝试将您的文本放入一个环绕元素（例如跨度）并对其设置约束。

<td><span style="max-width:150px;">Hello World...</span></td>

请注意，旧版本的 IE 不支持最小/最大宽度。

由于 IE 本身不支持 max-width ，如果你想强制它，你需要添加一个 hack。有几种方法可以添加 hack，这只是其中一种。

在页面加载时，仅适用于 IE6，获取表格的渲染宽度（以像素为单位），然后获取其中的 15% 并将其作为宽度再次应用于该列中的第一个 TD（或 TH，如果您有标题），以像素为单位.

score 19 · Accepted Answer

使用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>

score 13 · Accepted Answer

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>

score 11 · Accepted Answer

.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

score 11 · Accepted Answer

这对我来说适用于一些 css 框架（material design lite [MDL]）。

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

score 7 · Accepted Answer

7

我有一些我td的s：

white-space: pre;

这为我解决了它：

white-space: pre-wrap;

于 2020-01-19T05:34:26.633 回答

score 5 · Accepted Answer

这非常有效：

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td>

您可以对所有的<div's 使用相同的宽度，或者在每种情况下调整宽度以在任何您喜欢的地方中断文本。

这样您就不必胡乱使用固定的表格宽度或复杂的 css。

score 2 · Accepted Answer

要使单元格宽度与文本的最长单词完全相同，只需将单元格的宽度设置为1px

IE

td {
  width: 1px;
}

这是实验性的，我在反复试验时才知道这一点

现场小提琴：http: //jsfiddle.net/harshjv/5e2oLL8L/2/

score 1 · Accepted Answer

这可能会奏效，但在将来的某个时候（如果不是立即）可能会有点麻烦。

<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是，正如其他人所指出的那样， a<td>通常会扩展以适应内容，而 a<span>可以给定 - 并期望保持 - 设定的宽度；overflow: hidden旨在但可能不会隐藏会导致<td>扩展的内容。

我建议使用titlespan 的属性来显示可视单元格中存在（或剪辑）的文本，以便文本仍然可用（如果您不希望/不需要人们看到它，那么为什么要有它首先，我猜......）。

此外，如果您为td {...}td 定义宽度将扩展（或可能收缩，但我对此表示怀疑）以填充其隐含宽度（我认为这似乎是table-width/number-of-cells），指定的表格宽度似乎不会创建同样的问题。

缺点是用于演示的附加标记。

score 0 · Accepted Answer

将类应用到您的 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>

score 0 · Accepted Answer

实际上，文本的换行会在表格中自动发生。人们在测试时犯的错误是假设一个长字符串，如“gggggggggggggggggggggggggggggggggggggggggggggggg”并抱怨它没有换行。实际上，英语中没有这么长的单词，即使有，也有微弱的机会在其中使用它<td>。

尝试使用诸如“在预先确定的情况下对立是迷信的”这样的句子进行测试。

score 0 · Accepted Answer

我的解决方案是在文本想要换行的列中添加以下内容：white-space:normal

Chrome 和 Firefox 中的行为相同。

注意：我在使用 Vue/Quasar q-table 时遇到了这个问题。我通过 css/sass 限制了列的最大宽度（不确定这对于 Quasar 的 q-table 是否正确）。

score -1 · Accepted Answer

<!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>

html - 在标签中换行

15 回答 15

Related

Reference