我有一个表格单元格，我总是希望它具有特定的宽度。但是，它不适用于大的无间距文本字符串。这是一个测试用例：
td {
border: solid green 1px;
width: 200px;
overflow: hidden;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>如何让文本在框的边缘被截断，而不是让框展开？
【问题讨论】：
这里有一个适合你的解决方案，但我真的不明白它为什么有效：
<html><body>
<div style="width: 200px; border: 1px solid red;">Test</div>
<div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels. These pretzels are making me thirsty.</div>
<div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
<table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
<td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div></td>
</tr></table>
</body></html>
即，将单元格内容包装在一个 div 中。
【讨论】：
overflow:hidden 可以从td 中删除，div 的宽度可以设置为 100%，以便它与任何td 宽度（包括自动调整大小的！）
我不熟悉具体问题，但您可以在 td 中粘贴一个 div 等并在其上设置溢出。
【讨论】：
TD就是这样。我相信这可能是因为 TD 元素的“显示”属性固有地设置为“表格单元”而不是“块”。
在您的情况下，替代方法可能是将 TD 的内容包装在 DIV 中，并将宽度和溢出应用到 DIV。
<td style="border: solid green 1px; width:200px;">
<div style="width:200px; overflow:hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
</td>
可能需要处理一些填充或单元格填充问题，您最好删除内联样式并改用外部 css，但这应该是一个开始。
【讨论】：
vertical-align:middle，甚至将其添加到 DIV 也无法解决问题。
这里是same problem。
您需要在表格元素上设置table-layout:fixed和合适的宽度，以及在表格单元格上设置overflow:hidden和white-space: nowrap。
表格的宽度必须等于（或小于）固定宽度的单元格。
一列固定宽度：
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
max-width: 100px;
}
td {
background: #F00;
padding: 20px;
overflow: hidden;
white-space: nowrap;
width: 100px;
border: solid 1px #000;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>具有多个固定宽度的列：
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
max-width: 200px;
}
td {
background: #F00;
padding: 20px;
overflow: hidden;
white-space: nowrap;
width: 100px;
border: solid 1px #000;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>表格的宽度必须设置，但任何额外的宽度都会被流体单元简单地占用。
多列，固定宽度和可变宽度：
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
td {
background: #F00;
padding: 20px;
border: solid 1px #000;
}
tr td:first-child {
overflow: hidden;
white-space: nowrap;
width: 100px;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>【讨论】：
您必须设置表格的样式属性：width 和 table-layout: fixed; 才能让“溢出：隐藏；”属性正常工作。
Imo 这比使用带有width 样式属性的 div 效果更好，尤其是在将其用于动态调整大小计算时，表格将具有更简单的 DOM，这使得操作更容易，因为不需要对填充和边距进行更正
另外，您不必为所有单元格设置宽度，而只需为第一行中的单元格设置宽度。
像这样：
<table style="width:0px;table-layout:fixed">
<tr>
<td style="width:60px;">
Id
</td>
<td style="width:100px;">
Name
</td>
<td style="width:160px;overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
<tr>
<td style="">
Id
</td>
<td style="">
Name
</td>
<td style="overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
</table>
【讨论】：
我刚刚遇到了类似的问题，一开始不得不在<td> 中使用<div>（由于各种原因，John MacIntyre 的解决方案对我不起作用）。
注意虽然 <td><div>...</div></td> 不是 div 的有效位置，所以我使用 <span> 和 display:block; 设置。它现在验证良好并且可以正常工作。
【讨论】：
最好的解决方案是将 div 放入宽度为零的表格单元格中。 Tbody 表格单元格的宽度将继承自 thead 定义的宽度。 位置：相对和负边距应该可以解决问题！
这是一个截图： https://flic.kr/p/nvRs4j
<body>
<!-- SOME CSS -->
<style>
.cropped-table-cells,
.cropped-table-cells tr td {
margin:0px;
padding:0px;
border-collapse:collapse;
}
.cropped-table-cells tr td {
border:1px solid lightgray;
padding:3px 5px 3px 5px;
}
.no-overflow {
display:inline-block;
white-space:nowrap;
position:relative; /* must be relative */
width:100%; /* fit to table cell width */
margin-right:-1000px; /* technically this is a less than zero width object */
overflow:hidden;
}
</style>
<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
<thead>
<tr>
<td style="width:100px;" width="100"><span>ORDER<span></td>
<td style="width:100px;" width="100"><span>NAME<span></td>
<td style="width:200px;" width="200"><span>EMAIL</span></td>
</tr>
</thead>
<tbody>
<tr>
<td><span class="no-overflow">123</span></td>
<td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
<td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
</tbody>
</table>
</body>
【讨论】：
将 CSS table-layout:fixed;（有时是 width:<any px or %>）应用于 TABLE 和 TD 上的 white-space: nowrap; overflow: hidden; 样式。然后在 正确 单元格或列元素上设置 CSS 宽度。
值得注意的是，固定布局的表格列宽由表格第一行中的单元格宽度决定。如果第一行有 TH 个元素，并且宽度应用于 TD（而不是 TH），则宽度仅应用于 TD 的内容（空白和溢出可以忽略）；无论设置的 TD 宽度如何，表格列将均匀分布（因为 [在第一行的 TH 上] 没有指定宽度）并且列将具有 [计算] 相等的宽度；该表不会根据后续行中的 TD 宽度重新计算列宽。设置表格将遇到的第一个单元格元素的宽度。
另外，设置列宽的最安全方法是在表格中使用<COLGROUP> 和<COL> 标记，并在每个固定宽度COL 上设置CSS 宽度。当表格预先知道列宽时，与单元格宽度相关的 CSS 效果会更好。
【讨论】：
为了更简单 我建议在 td 中放置一个 textarea 这是自动管理溢出
<td><textarea autofocus>$post_title</textarea></td>
需要改进
【讨论】：
<style>
.col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
<tr>
<td class="col">123456789123456789</td>
</tr>
</table>
显示 123456
【讨论】：
最简单有效的解决方案：
table { table-layout: fixed }
table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
【讨论】：