html - "pre"填充最小宽度的字符，调整大小时自动换行

Question

我有一些字符串(全部都是字母和罕见的换行符，没有空格或任何其他分隔符)我想填充到表格单元格中，直到单元格宽度(变化根据窗口大小，在示例中设置为 50%)。我希望浏览器在达到表格单元格宽度时几乎不换行，但也欢迎字符串中的换行符。表格单元格中的内容应具有给定的固定最小宽度(在下面的示例中为 200px)，如果进一步调整窗口大小，这将导致出现垂直滚动。这个窗口刚刚变得太小的时刻我在这张截图上显示:

我通过对 td ( playground ) 使用 max-width 实现了 FF10 中所需的行为，但我不能对 IE 做同样的事情:它忽略 max-width。更重要的是，当 max-width 设置在 pre 上时，它有非常奇怪的行为:渲染器忽略内容的实际宽度并认为 pre未包装(playground – 与 FF 比较；报告了类似问题 here 和 there)。在最坏的情况下，将内容严格固定为 200px 是可以的(它应该应用于 IE 的 pre，一个应用于 td没有任何影响)。为了使此修复仅影响 IE，我尝试了以下 CSS:

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    width: expression("200px");
}

td.wrap {
    color: red;
    max-width: 200px;
}

很遗憾，不适用于 IE8。

目标浏览器:FF9(更高版本)、IE7、IE8、Chrome(最新)。

抱歉，如果这个问题是重复的:我已经检查了 How do I wrap text in a pre tag? , How can I word wrap this list item? , Not able to do max width , Max-Width not working on Table for IE7和许多其他人:没有为 IE 找到明确的解决方案。

Answer 1

我试图从另一个方面解决这个问题 :) 用 min-width: 400px 将表格环绕在一个 div 中，这让 IE 很讨厌。这是 fiddle :http://jsfiddle.net/6Agbw/3/ .希望这就是您所需要的。