html - pre tag-文本溢出框

Question

我已将以下样式应用于 pre 元素:

pre {
     background-color: #FFFFCC;
     border: 2px dashed #FF6666;
     padding-top: 7px;
     padding-bottom: 8px;
     padding-left: 10px;
     float: none;
     padding-right: 10px;
     margin: 10px;
    }

文本溢出框。 当我应用 float:right 属性时，盒子的行为符合预期，但在大屏幕上，其余部分自然地漂浮在盒子周围。不开心。 EDIT2:我做到了(但对于 ie6)，使用 float + clear。我已经发布了another question on the new bugs

我是 CSS 和 HTML 的新手 - 我确信有一个简单的解决方案。请帮忙。 :(

编辑:更接近标记:

pre {
     background-color: #FFFFCC;
     border: 2px dashed #FF6666;
     padding-top: 7px;
     padding-bottom: 8px;
     padding-left: 10px;
     padding-right: 10px;
     margin: 10px;
     white-space: pre-wrap;
    }

这在 ie6 中完全按照我想要的方式显示 - 在 ff 3.5 中文本换行 - 我知道这是它应该的方式 - 但我如何才能将 ie 行为带到 ff 中？

带 white-space: pre;

样式化 pre 标签的图像

ie6:https://i1032.photobucket.com/albums/a406/dardanov/ie6pre.jpg

ff 3.5: https://i1032.photobucket.com/albums/a406/dardanov/ff35pre.jpg

for white-space: pre-wrap; firefox wraps and ie 保持不变。如何在 ff 中获得 ie 行为(代码框的自动扩展)？

EDIT2 :见下面的答案

Answer 1

如果我没看错你的问题，你想显示包含在一个框中的代码/文本，并且该代码不能换行(除非这样换行，或者回车符/换行符/等出现在代码/文本本身)。您还希望包含元素增加其水平尺寸以扩展到文本/代码所需的宽度吗？

因此，如果您的文本最长的一行有 20 个字符，那么您的 <pre>宽度至少为 20 个字符，如果文本的最长行有 200 个字符，那么它应该拉伸(stretch)以容纳 200 个字符？

如果这些假设是正确的，那么您至少不能在没有 javascript 的情况下做您想做的事情，因为这需要根据子元素的宽度设置父元素的宽度。不幸的是，CSS 向下层叠 DOM，并且仅以一种方式层叠。

如果没有 JS，你能做的最好的事情就是添加:

overflow: scroll; /* or auto */

或:

overflow-x: scroll;

到您的 CSS，这将保持 <pre> 的宽度，但允许滚动以允许最长的行保持未换行。

如果我误解了你的问题，请提出评论，我会尽我所能更有用地解决你的问题。