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

时间：2009-02-04 01:06:06

标签： html css

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

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>

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

11 个答案:

答案 0 :(得分：192)

这是same problem。

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

答案 1 :(得分：17)

这就是TD的方式。我相信这可能是因为TD元素的'display'属性固有地设置为'table-cell'而不是'block'。

在您的情况下，替代方案可能是在DIV中包装TD的内容并将宽度和溢出应用于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>

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

答案 2 :(得分：9)

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

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

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

答案 3 :(得分：6)

我不熟悉具体的问题，但是你可以在td中粘贴一个div等，然后设置溢出。

答案 4 :(得分：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中。

答案 5 :(得分：3)

您必须设置表的样式属性：width和table-layout: fixed;以使'溢出：隐藏;'属性正常工作。

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

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

像这样：

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

答案 6 :(得分：3)

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

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

答案 7 :(得分：2)

我刚遇到类似的问题，并且最初必须使用<div>内的<td>（John MacIntyre的解决方案对我来说并不适用各种原因）。

注意虽然<td><div>...</div></td>不是div的有效展示位置，所以我使用<span>设置了display:block;。它现在验证正常并且有效。

答案 8 :(得分：0)

使更简单 我建议把一个textarea放在td里面 这是自动管理溢出

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

需要改善

答案 9 :(得分：0)

<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

显示123456

答案 10 :(得分：0)

最简单有效的解决方案：

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}
相关问题
最新问题