为什么溢出：隐藏在a中不起作用？

Question

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

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>

如何使文本在框的边缘处被切除，而不是使框展开？

Answer 1

需要设置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>