Question

我遇到的问题是html表溢出了它的父容器。我已设置a sample jsfiddle here来说明问题。

如何强制标题文本和表格单元格文本以适合其容器的方式进行换行？我更喜欢仅CSS的方法，但如果绝对必要，我也愿意使用Javascript（或jQuery）。

Answer 1

从纯粹的“让它适合div”的角度来看，将以下内容添加到您的表类（jsfiddle）中：

table-layout: fixed;
width: 100%;

根据需要设置列宽;否则，固定布局算法会将表格宽度均匀分布在您的列上。

为了快速参考，这里是表格布局算法，重点是我的：

固定（source）
使用此（快速）算法，表的水平布局不依赖于单元格的内容;它只取决于表格的宽度，列的宽度，边框或单元格间距。
自动（source）
在此算法中（通常不需要超过两次），表格的宽度由其列的宽度 [，由内容确定] < / b>（以及介入borders）。

[...]此算法可能效率低下，因为它要求用户代理在确定之前访问表中的所有内容。最终布局，可能需要多次通过。

单击查看源文档以查看每种算法的具体信息。

Answer 2

尝试添加

word-break: break-all

到表元素上的CSS。

这将使表格单元格中的单词断开，使得表格不会比包含div的表格更宽，但表格列仍然是动态调整大小的。 jsfiddle demo

Answer 3

将display: block;和overflow: auto;添加到.my-table。这将简单地切断超出您执行的280px限制的任何内容。由于pélagosthrough之类的字词宽于280px，因此无法使其“看起来很漂亮”。

Answer 4

尝试添加到td：

display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify

溢出的tds将与新行对齐。

Answer 5

好吧，考虑到你的限制，我认为在overflow: scroll; div上设置.page可能是你唯一的选择。 280 px非常窄，考虑到你的字体大小，单独换行就不会这样做了。有些词很长，无法包裹。您可以大幅缩小字体大小，也可以使用overflow：scroll。

Answer 6

将CSS更新为以下内容：这应该可以解决

.page {
    width: 280px;
    border:solid 1px blue;
    overflow-x: auto;
}