为什么overflow：hidden在<td>中不起作用？

146

我有一个表格单元格，我一直希望成为一个特定的宽度。但是，它不适用于较大的无间距文本字符串。这是一个测试案例：

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  css 
— 麦克风
source

Answers:

205

这是同样的问题。

需要设置table-layout:fixed 和表元件上的合适的宽度，以及overflow:hidden和white-space: nowrap在桌子上的细胞。

例子

定宽列

表格的宽度必须与固定宽度的单元格相同（或更小）。

使用一个固定宽度的列：

显示代码段

使用多个固定宽度的列：

显示代码段

固定和流体宽度色谱柱

必须设置表格的宽度，但是任何多余的宽度都可以由流体单元简单地获取。

对于多列，固定宽度和流体宽度：

显示代码段

— misterManSam
source
21

这就是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，但这应该是一个开始。

— 安迪·福特
source
这行得通，但我输了vertical-align:middle，甚至将其添加到DIV中也无法解决问题。
— 迈克尔
10

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

重要的是，固定布局表的列宽由表第一行中的单元格宽度确定。如果第一行中有TH元素，并且宽度应用于TD（而不是TH），则宽度仅应用于TD的内容（可以忽略空白和溢出）；不论设置的TD宽度如何，表列将平均分配（因为未指定[第一行TH上的宽度]），并且列具有[计算的]相等的宽度；该表格将不会根据后续行中的TD宽度重新计算列宽。设置表格将遇到的第一个单元格元素的宽度。

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

— 佐兹
source
7

我不熟悉特定的问题，但是您可以在dd内贴上div等，然后对此设置溢出。

— 奥利
source
5

好了，这是为您提供的解决方案，但我真的不明白为什么会这样：

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

— 克莱图斯
source
如此处所示，overflow:hidden可以进一步改进-具体来说，可以将其从中删除td，并将其宽度div设置为100％，以使其可以使用任何td宽度（包括自动调整尺寸的宽度！）
— Roman Starkov
4

最好的解决方案是将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>
— 久拉·苏曼（Gyula Surmann）
source
您应该同时使用span和div，当然要对css中声明的span进行适当的块设置。据我所知，td也应包含div。
— Gyula Surmann
3

您必须设置表格的样式属性：width和table-layout: fixed;让“溢出：隐藏；” 属性正常工作。

Imo比使用div和 width style属性的，尤其是在将其用于动态调整大小计算时，该表将具有更简单的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>
— 威尔科·格辛克
source
2

我刚刚遇到了类似的问题，并且一开始必须使用<div>内部<td>（John MacIntyre的解决方案由于种种原因对我不起作用）。

请注意，尽管<td><div>...</div></td>对于div而言这不是有效的展示位置，所以我使用的是<span>with with display:block;set。它现在可以很好地验证并且可以工作。

— 仅仅发展
source
1

最简单有效的解决方案： 

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}
— 阿明
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.