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

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

分区资料{
溢出：隐藏；
宽度：100%；
空白：nowrap；
}
表{宽度：100%；}
td{边框：1px点黑色；}
长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本

这会导致表格增长以容纳整个长文本。（缩小浏览器窗口以查看屏幕分辨率是否很大。）

我添加了

width:100%

和

overflow:hidden

来表示长文本应该简单地被截断，但它似乎忽略了这一点。如何约束表格/表格单元格/div，使表格的宽度不超过文档的宽度

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

（编辑：我也尝试了

max width

，但没有成功。）

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

---

它并没有忽略这一点，您的div正在将表的宽度扩展100%，而表的宽度设置为100%，只需为td指定一个最大宽度，它应该按照您的预期进行截断。

您现在已经设置了rap，因此td无法正确约束内容。删除该值应该可以获得所需的结果。

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

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

---

要实现这一点，您必须将长文本包装成两个div。外部获取

位置：relative

，只包含内部。内部一个获取

位置：绝对值

，

溢出值：隐藏值

，和

宽度：100%

（这将其限制为表格单元格的大小）

现在，表格布局算法将这些表格单元格视为空（因为绝对定位的元素被排除在布局计算之外）。因此，我们必须告诉它无论如何都要增长该列。有趣的是，在相关的

元素上设置

width:100%

是有效的，因为它实际上并没有填充100%的宽度，而是100%减去所有其他列的宽度（自动调整大小）。它还需要一个

垂直对齐：top

，否则（空）外部div将对齐中间，因此绝对定位的元素将偏移半行

下面是一个完整的示例，其中有一个三列两行的表格，显示了这一点：

CSS:

HTML:

福
fooofoooooooooooo
长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本
芭芭拉酒吧
酒吧
一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本一些较长的文本更多一些长文本

在本例中，前两列的大小将尽可能小（即空格将使其大量换行，除非您还向其添加

空格：nowrap

）

---

JSIDLE:

构建@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>

表格{
宽度：100%；
边框：1px实心#ccc；
}
运输署{
填充：14px；
线高：1.5；
边框：1px实心#ccc；
}
.外部{
位置：相对位置；
高度：22px；
}
.内部{
位置：绝对位置；
溢出：隐藏；
宽度：100%；
空白：nowrap；
保证金：自动；
排名：0；
底部：0；
}
这是一个非常长的文本字符串
222222222

---

我使用的是bootstrap 2.3.2，所以这就是高度值的来源。这里有一个指向小提琴的链接

不，删除该值将使文本换行。哦，糟糕，我没有意识到你想把文本切掉-对不起。您是否尝试将td设置为overflow:hidden？这不是您想要的效果吗？--我添加了width:100%和overflow:hidden来表示长文本应该简单地被切掉，但它似乎忽略了这一点--这是我写的一个演示，用来回答另一个问题，它在td中有一个div，在启用overflow-x的情况下扩展100%。“这不是你想要的效果吗？”-不，当然不是；如果页面的宽度为500px怎么办？1000像素？有人会认为100%应该意味着100%…好吧，那么，你希望文本在什么时候被截断？你必须想一想，100%宽度不是很具体。还有，100%什么？宽度是相对于父级的，如果您有一个500px宽的表，500px的100%是500px，如果您指的是body标记，100%是内容的宽度，如果您指的是html标记，100%宽度是内容中所有可用内容的大小，您必须定义100%。您完全可以不使用外部div来实现这一点：只需将内部div限制为该大小。非常好的解决方案和解释。值得指出的是，

div.inner{width:100%；}

是相关的pa

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

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>