CSS：将具有长单元格内容的表格限制为页面宽度？

Question

采取以下CSS+HTML：

<style>
    div.stuff {
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
    }
    table { width: 100%; }
    td { border: 1px dotted black; }
</style>

<table>
    <tr><td>
        <div class='stuff'>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
    </td></tr>
</table>

这会导致表格增长以容纳整个长文本。 （让你的浏览器窗口变小，看看你的屏幕分辨率是否很高。）

我添加了width: 100% 和overflow: hidden 表示应该简单地截断长文本，但它似乎忽略了这一点。如何约束表格/表格单元格/div，使表格的宽度不超过文档的宽度？

(请不要评论使用表格的优点。我确实是显示表格数据，所以使用表格在语义上是正确的。另外请不要质疑切断的用户友好性text；实际上有一个“展开”按钮，允许用户查看全部内容。谢谢！）

（编辑：我也试过max-width，但无济于事。）

Answer 1

要实现这一点，您必须将长文本包装成两个 div。外层得到position: relative，只包含内层。内层获得position: absolute、overflow: hidden 和width: 100%（这将其限制为表格单元格的大小）。

表格布局算法现在认为这些表格单元格是空的（因为绝对定位的元素被排除在布局计算之外）。因此，我们必须告诉它无论如何都要增长该列。有趣的是，在相关的 <col> 元素上设置 width: 100% 是有效的，因为它实际上并没有填充 100% 的宽度，而是 100% 减去所有其他列的宽度（自动调整大小）。它还需要vertical-align: top，否则（空）外部 div 会居中对齐，因此绝对定位的元素将偏离半行。

这是一个完整的示例，其中包含一个三列两行的表格，展示了这一点：

CSS：

div.outer {
    position: relative;
}
div.inner {
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td {
    border: 1px dotted black;
    vertical-align: top;
}
col.fill-the-rest { width: 100%; }

HTML：

<table>
    <col><col><col class="fill-the-rest">
    <tr>
        <td>foo</td>
        <td>fooofooooofooooo</td>
        <td>
            <div class='outer'>
                <div class='inner'>
                    Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>barbarbarbarbar</td>
        <td>bar</td>
        <td>
            <div class='outer'>
                <div class='inner'>
                    Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text
                </div>
            </div>
        </td>
    </tr>
</table>

在此示例中，前两列将具有最小的可能大小（即空格会使它们换行很多，除非您还向它们添加 white-space: nowrap）。

jsFiddle：http://jsfiddle.net/jLX4q/

Answer 2

我添加了 width: 100% 和 overflow: hidden 表示应该简单地截断长文本，但它似乎忽略了这一点。

不要忽略这一点，您的 div 正在扩展 100% 的表格宽度，该宽度设置为按原样扩展 100%，只需给您的 td 一个最大宽度，它应该会按照您的预期截断。

Answer 3

以@Timwi 的解决方案为基础...

table {
 width: 100%;
 border: 1px solid #ccc;
}

td {
 padding: 14px;
 line-height: 1.5;
 border: 1px solid #ccc;
}

.outer {
 position:relative;
 height: 22px;
}

.inner {
  position: absolute;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  margin: auto;
  top: 0;
  bottom:0;
}

<table>
  <tr>
    <td>
      <div class="outer">
        <div class="inner">
          this_is_a_really_long_string_of_text
        </div>
      </div>
    </td>
    <td>
      222222222
    </td>
  </tr>
</table>

我使用的是引导程序 2.3.2，所以这就是高度值的来源。这是小提琴的链接http://jsfiddle.net/YFCV6/

Answer 4

答案略有不同：如果您希望表格显示其所有内容，同时仍受限于页面宽度，请尝试使用overflow-wrap: anywhere。这会强制文本换行，尽可能打破单词边界。

要支持旧版浏览器，您可以使用旧版 word-break: break-word 和 word-break: break-all 作为备用。

此处示例：https://jsfiddle.net/joseph_white3/nhj9fLrw/

另请注意：如果您希望仅根据第一行确定列宽，请仅设置 table-layout: fixed。请参阅documentation on MDN。

Answer 5

您设置了 nowrap，因此 td 无法正确约束内容。删除该值应该会达到预期的结果。

Answer 6

只要你有任何 width: 100% 标签，它就会扩展以包含内容。

获得所需结果（不换行的文本）的一种方法是让一个带有隐藏溢出的外部 div + 一个固定宽度，然后是一个具有超宽宽度的内部 div。

http://jsfiddle.net/xvaEw/