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%和width: 100%（这会将其约束为表格单元格的大小）。

表格布局算法现在将这些表格单元格视为空（因为绝对定位的元素从布局计算中排除）。因此，无论如何，我们必须告诉它增长该列。有趣的是，在相关的<col>元素上设置vertical-align: top可以正常工作，因为它实际上不会填充100％的宽度，而是100％减去所有其他列的宽度（这是自动的尺度的）。它还需要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%; }，否则（空）外部div在中间对齐，因此绝对定位的元素将偏离半行。

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

CSS：

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

HTML：

white-space: nowrap

在这个例子中，前两列将具有最小可能的大小（即空格将使它们包裹很多，除非你还向它们添加{{1}}）。

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

Answer 2

我添加了宽度：100％并且溢出：隐藏表示长文本应该被简单地删除，但它似乎忽略了。

它并没有忽略这一点，你的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>

我正在使用bootstrap 2.3.2，这就是高度值的来源。这是指向小提琴http://jsfiddle.net/YFCV6/

的链接

Answer 4

你有nowrap设置所以td无法正确约束内容。删除该值应该可以达到预期的效果。

Answer 5

只要您有任何宽度：100％标签，它就会展开以包含内容。

获得所需结果的一种方法（不包裹的文本）是一个外部div，其中溢出隐藏+设置宽度，然后是一个内部div，宽度超宽。

http://jsfiddle.net/xvaEw/

CSS：约束一个具有长单元格内容到页面宽度的表格？

5 个答案: