Html 为什么溢出：隐藏在 <td> 中不起作用？

Why does overflow:hidden not work in a <td>?

提问by mike

I've got a table cell that I would always like to be a particular width. However, it doesn't work with large strings of unspaced text. Here's a test case:

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

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>

How do I get the text to be cut off at the edge of the box, rather than having the box expand?

如何让文本在框的边缘被切断，而不是让框展开？

回答by John MacIntyre

Here is the same problem.

这是同样的问题。

You need to set table-layout:fixedanda suitable width on the table element, as well as overflow:hiddenand white-space: nowrapon the table cells.

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

---

---

Examples

例子

Fixed width columns

固定宽度列

The width of the table has to be the same (or smaller) than the fixed width cell(s).

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

With one fixed width column:

使用一个固定宽度的列：

* {
  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>

With multiple fixed width columns:

具有多个固定宽度的列：

* {
  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>

Fixed and fluid width columns

固定和可变宽度列

A width for the table must be set, but any extra width is simply taken by the fluid cell(s).

必须设置表格的宽度，但任何额外的宽度都由流体单元简单地占用。

With multiple columns, fixed width and fluid width:

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

* {
  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>

回答by Andy Ford

That's just the way TD's are. I believe It may be because the TD element's 'display' property is inherently set to 'table-cell' rather than 'block'.

这就是TD的方式。我相信这可能是因为 TD 元素的“显示”属性固有地设置为“表格单元格”而不是“块”。

In your case, the alternative may be to wrap the contents of the TD in a DIV and apply width and overflow to the DIV.

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

There may be some padding or cellpadding issues to deal with, and you're better off removing the inline styles and using external css instead, but this should be a start.

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

回答by szozz

Apply CSS table-layout:fixed;(and sometimes width:<any px or %>) to the TABLE and white-space: nowrap; overflow: hidden;style on TD. Then set CSS widths on the correctcell or column elements.

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

Significantly, fixed-layout table column widths are determined by the cell widths in the first row of the table. If there are TH elements in the first row, and widths are applied to TD (and not TH), then the width only applies to the contents of the TD (white-space and overflow may be ignored); the table columns will distribute evenly regardless of the set TD width (because there are no widths specified [on TH in the first row]) and the columns will have [calculated] equal widths; the table will not recalculate the column width based on TD width in subsequent rows. Set the width on the first cell elements the table will encounter.

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

Alternatively, and the safest way to set column widths is to use <COLGROUP>and <COL>tags in the table with the CSS width set on each fixed width COL. Cell width related CSS plays nicer when the table knows the column widths in advance.

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

回答by Oli

I'm not familiar with the specific issue, but you could stick a div, etc inside the td and set overflow on that.

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

回答by cletus

Well here is a solution for you but I don't really understand why it works:

好吧，这是一个适合您的解决方案，但我真的不明白它为什么有效：

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

Namely, wrapping the cell contents in a div.

即，将单元格内容包装在一个 div 中。

回答by Gyula Surmann

Best solution is to put a div into table cell with zero width. Tbody table cells will inherit their widths from widths defined the thead. Position:relative and negative margin should do the trick!

最佳解决方案是将 div 放入零宽度的表格单元格中。Tbody 表格单元格将从定义顶部的宽度继承其宽度。位置：相对和负边距应该可以解决问题！

Here is a screenshot: https://flic.kr/p/nvRs4j

这是截图：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>

回答by Wilko Gesink

You'll have to set the table's style attributes: widthand table-layout: fixed;to let the 'overflow: hidden;' attribute work properly.

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

Imo this works better then using divs with the widthstyle attribute, especially when using it for dynamic resizing calculations, the table will have a simpler DOM which makes manipulation easier because corrections for padding and margin are not required

Imo 这比使用带有widthstyle 属性的div 效果更好，尤其是在将其用于动态调整大小计算时，表格将具有更简单的 DOM，这使得操作更容易，因为不需要对填充和边距进行更正

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

另外，您不必为所有单元格设置宽度，而只需为第一行中的单元格设置宽度。

Like this:

像这样：

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

回答by Mere Development

I've just had a similar problem, and had to use the <div>inside the <td>at first (John MacIntyre's solution didn't work for me for various reasons).

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

Notethough that <td><div>...</div></td>isn't valid placement for a div so instead I'm using a <span>with display:block;set. It validates fine now and works.

请注意，虽然这<td><div>...</div></td>不是 div 的有效位置，但我使用的是<span>with display:block;set。它现在验证正常并且可以正常工作。

回答by Armin

Easiest and simplest solution that works:

最简单有效的解决方案：

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

回答by Gilles Blanchard

to make more simple i propose to put an textarea inside the td wich is manage automaticly the overflow

为了更简单，我建议在 td 中放置一个 textarea 自动管理溢出

<td><textarea autofocus>$post_title</textarea></td>

<td><textarea autofocus>$post_title</textarea></td>

need to be ameliorate

需要改善