为什么overflow：hidden不能在< td&gt ;?中工作？ [英] Why does overflow:hidden not work in a <td>?

问题描述

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

  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>  

解决方案

这里是

a href =http://stackoverflow.com/questions/480722/how-can-i-set-a-td-width-to-visually-truncate-its-displayed-contents>相同的问题。

您需要设置 table-layout：fixed 和表元素，以及表单元格上的 overflow：hidden 和 white-space：nowrap 。

---

示例

固定宽度列

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

width column ：

  * -sizing：border-box;} table {table-layout：fixed; border-collapse：collapse;宽度：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>  

具有多个固定宽度的列： data-console =

  * {box-sizing：border-box;} table {table-layout：fixed; border-collapse：collapse;宽度：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>  

width列

表格的宽度必须设置，但是任何额外的宽度都只是流体池采取的。 p>

有多个栏，固定宽度和流体宽度：

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

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?

解决方案

Here is the same problem.

You need to set table-layout:fixed and a suitable width on the table element, as well as overflow:hidden and white-space: nowrap on the table cells.

---

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>

这篇关于为什么overflow：hidden不能在< td&gt ;?中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！