为什么溢出: 隐藏在 < td > 中不工作？

小开

好吧，这里有一个解决方案，但我真的不明白它为什么有效:

<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 中。

小开

我不熟悉具体的问题，但是您可以在 td 中插入一个 div 等，并在其上设置溢出。

小开

TD 就是这样。我相信这可能是因为 TD 元素的“ display”属性本质上被设置为“ table-cell”而不是“ block”。

在您的情况下，替代方法可能是将 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>

可能需要处理一些填充或 cellpads 问题，您最好删除内联样式并使用外部 css，但这应该是一个开始。

小开

最佳答案

这是同样的问题。

您需要在表格元素上设置 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>

小开

您必须设置表的 style 属性: width和 table-layout: fixed;，以使‘ overflow: hide;’属性正常工作。

比起使用带有 width样式属性的 div，Imo 这个工作得更好，特别是当使用它进行动态调整大小计算时，表将有一个更简单的 DOM，这使得操作更容易，因为不需要修正填充和边距

As an extra, you don't have to set the width for all cells but only for the cells in the first row.

像这样:

<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 来说不是有效的位置，所以我使用的是带有 display:block;集的 <span>。它现在验证正常，并且工作正常。

小开

最好的解决方案是将 div 放入零宽度的表单元格中。 Tbody 表单元格将从头部定义的宽度继承它们的宽度。位置: 相对和负边缘应该做的技巧！

下面是一个截图: 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>

小开

对 TD 上的 TABLE 和 white-space: nowrap; overflow: hidden;样式应用 CSS table-layout:fixed;(有时是 width:<any px or %>)。然后在正确单元格或列元素上设置 CSS 宽度。

值得注意的是，固定布局的表列宽度由表的第一行中的单元格宽度决定。如果第一行中有 TH 元素，宽度应用于 TD (而不是 TH) ，那么宽度只应用于 TD 的内容(空白和溢出可以忽略) ; 表中的列将均匀分布，而不管设置的 TD 宽度(因为没有指定宽度[在第一行的 TH 上]) ，并且列将有[计算]相同的宽度; 表不会在后续行中根据 TD 宽度重新计算列宽度。设置表将遇到的第一个单元格元素的宽度。

另外，最安全的设置列宽的方法是在表格中使用 <COLGROUP>和 <COL>标签，在每个固定宽度上设置 CSS 宽度 COL。当表格提前知道列宽时，与单元格宽度相关的 CSS 表现得更好。

小开

让事情变得更简单我建议在 td 里面放一个文本区域自动管理溢出

<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;
}