在 < td > 标记中包装文本

小开

我相信你已经遇到了22张桌子的问题。表格对于以表格结构包装内容非常有用，而且它们在“拉伸”以满足所包含内容的需求方面做得非常好。

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

有几个解决办法。

1)你可以尝试在 TD 上设置一个最大宽度。

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

2)你可以尝试把你的文本放在一个包装元素中(比如 span) ，并对其设置约束。

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

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

由于 IE 本身不支持最大宽度，如果你想强制它，你需要添加一个黑客。有几种方法可以添加黑客，这只是其中之一。

在页面加载时，仅对于 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) ，一个指定的表宽度似乎不会产生同样的问题。

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

小开

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

小开

HTML 表支持“表布局: 固定”的 css 样式，防止用户代理根据内容调整列宽。你可能想用一下。

小开

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>

小开

.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

小开

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

试着用这样的句子来测试: “在预先确定的情况下，对位是迷信的。”。

小开

包装 TD 文本

第一套餐具风格

table{
table-layout: fixed;
}

然后设置 TD 风格

td{
word-wrap:break-word
}

小开

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

也就是说。

td {
width: 1px;
}

这是 实验性的，我是在做 反复试验的时候知道的

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

小开

这种方法非常有效:

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

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

这样，您就不必在固定的表宽度或复杂的 css 上浪费时间了。

小开

这在一些 css 框架(材料设计精简版[ MDL ])中对我很有用。

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


td {
word-wrap: break-word;
}

小开

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

小开

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

小开

我有一些 td:

white-space: pre;

这解决了我的问题:

white-space: pre-wrap;

小开

对我来说，解决方案是在文本需要换行的列中添加以下内容: white-space:normal

在 Chrome 和 Firefox 中同样的行为。

注: 我在 Vue/Quasar Q-table 上遇到了点问题。我已经通过 css/sass 限制了列的最大宽度(不确定这对于类星体的 q 表是否正确)。