Question

我遇到一个表溢出其容器的问题。有一个单元格包含带有动态内容的pre，此单元格会使表格超出其父级。我认为我需要的是强制它包装行，以便表不会溢出。我试过了：

pre.content {
    white-space: pre-wrap;
}

要保留空白区域以及包装内容，但这似乎只在一个单词已经超出其边界后才插入中断。我希望它在离开容器之前包装一个单词。我意识到我可以用word-wrap: break-word;打破中间词，但这使得它很难阅读。

我仍在尝试学习CSS的所有内容，以便我可能有错误的诊断。该表没有设置宽度，因为我假设默认情况下该表应保留在其父级中。我开始认为我错了。我试图将宽度设置为100％，但这似乎使所有单元格宽度相等，这不是我想要的。所以我认为正确的包装将解决问题。

希望有人可以提供帮助！

Answer 1

假设这个小提琴是你所做的准确表现： http://jsfiddle.net/xDMYR/2/

除非您为其指定固定宽度，否则表格将展开以包含其内容。从示例中可以看出，第二个表已扩展为大于它所包含的div，因为它的内容太大。但是，第一个表没有对内容来说太大的单词，因此相应地包装了单词。

您的内容必须太大，无法提供您所提供的空间。解决方案是缩短动态表格单元格内的内容，或者可以强制单词中断，如第三个表格所示。然而，这确实产生了一些奇怪的结果。

供参考，其代码为：

-ms-word-break: break-all;
 word-break: break-all;
 word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

有关分词/包装的更多信息，请查看此处： http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

在单词扩展到容器之前插入单词分隔符

1 个答案: