Question

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

Answer 1

包装TD文本

首先设置表格样式

table{
    table-layout: fixed;
}

然后设置TD Style

td{
    word-wrap:break-word
}

Answer 2

HTML表支持“table-layout：fixed”css样式，可防止用户代理使列宽适应其内容。您可能想要使用它。

Answer 3

我相信你遇到了表格中的第22个问题。表格非常适合以表格结构包装内容，并且它们可以很好地“拉伸”以满足其所包含内容的需求。

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

有一些解决方案。

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

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

2.）您可以尝试将文本放在包装元素（例如跨度）中并对其设置约束。

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

请注意，旧版本的IE不支持min / max-width。

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

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

Answer 4

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>

Answer 5

.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

的信用

Answer 6

这对我有一些css框架（材料设计精简版[MDL]）。

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

td {
  word-wrap: break-word;
}

Answer 7

这非常有效：

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

您可以为所有<div使用相同的宽度，或者在每种情况下调整宽度，以便在任何地方打破文字。

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

Answer 8

我有一些td与：

white-space: pre;

这为我解决了这个问题：

white-space: pre-wrap;

Answer 9

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

即

td {
  width: 1px;
}

这是实验，我在做试错

时就知道了这一点

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

Answer 10

这可能会起作用，但在将来的某个时刻（如果不是立即）可能会有点麻烦。

<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>扩展的内容。

我建议使用跨度的title属性来显示可视单元格中存在（或剪切）的文本，以便文本仍然可用（如果您不想/需要人员为了看到它，那么为什么要把它放在首位，我猜......）。

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

缺点是用于演示的额外标记。

Answer 11

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

尝试用“在预先确定的情况下反制是迷信”之类的句子进行测试。

Answer 12

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

Answer 13

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

Answer 14

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

HTML TD换行文字

14 个答案: