-1

我有一个表溢出其容器的问题。有一个单元格包含具有动态内容的 pre，并且此单元格导致表格超出其父级。我认为我需要的只是强制它换行，这样表格就不会溢出。我试过了：

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

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

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

希望有人可以提供帮助！

4

1 回答 1

1

假设这个 js fiddle 是您所做工作的准确表示：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/

于 2013-09-10T10:08:19.330 回答