pre tag-文本溢出框答案

【问题标题】：pre tag- text overflows the boxpre tag-文本溢出框
【发布时间】：2010-02-25 20:52:29
【问题描述】：

我已将以下样式应用于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; 样式的前置标签的图像

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

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

对于white-space: pre-wrap; firefox 换行，即保持不变。如何在 ff 中获得 ie 行为（代码框的自动扩展）？

EDIT2：见下面的答案

【问题讨论】：

为什么还要使用 PRE 标签？为什么不使用具有所需 CSS 的 DIV，其中包含（如有必要）一个 PRE 标签，该标签将文本与您可能想要的刚性空白保持原样？
这个css是什么？我希望盒子根据里面的文字缩小或加宽。我会尝试回帖。
是否尝试了将“更接近标记代码”附加为类样式的 div 方法。文本仍以 ff 换行。那么有没有办法让盒子在预先格式化时随文本缩小或加宽？空白：pre；不幸的是，文本溢出了框。

标签： html css text tags pre

【解决方案1】：

如果我正确阅读了您的问题，您希望显示包含在一个框中的代码/文本，并且该代码无法换行（除非代码中存在此类换行或回车/换行/等）文字本身）。您还希望包含元素增加其水平尺寸以扩展到文本/代码所需的宽度？

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

如果这些假设是正确的，那么你不能 - 没有 javascript，至少 - 做你想做的事，因为它需要根据其子元素的宽度来设置父元素的宽度。不幸的是，CSS 会向下级联 DOM，而且只有一种方式。

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

overflow: scroll; /* or auto */

或：

overflow-x: scroll;

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

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

【讨论】：

谢谢！你没看错。所以 ie 的行为是一个错误？因为这是我知道的唯一值得重现的错误。我不是为了overflow属性——我需要js来重现ie的bug？
任何有关该错误的文档（链接）都会非常有用。谢谢（也为编辑）
并解释为什么 float:left 会起作用！？我将对此进行试验并明确 - 也许我最终会按照自己的方式进行:)
我不确定为什么float: left 会完成这项工作，这可能是因为float 将元素从文档流中取出并删除了元素继承其父级宽度的约束?但这只是一个猜测，我当然不能用证据来支持它。如果其他人可以纠正我，我很想知道。
我将自述文件的各个部分包装在浮动到左侧的 div 中并 `clear:both` 并且它在 ff 3.5 和 opera 10 中完全符合我的要求 - 但现在 ie6 限制了 div 的宽度相当大（？！）任何修复？

【解决方案2】：

除了分号问题之外，pre 标签所做的一件重要的事情是将 CSS white-space property 设置为“nowrap”（我想是“pre”，但这只会让事情变得混乱），所以它的工作方式与它完全一样应该。如果你想阻止它那样工作，设置“nowrap: normal;”。但是，这使得 pre 元素像其他所有元素一样工作，而不是它的预期工作方式，这可能会使与您一起工作的其他人感到困惑。为什么不直接使用 div 元素？你想达到什么目的？

【讨论】：

显示一些代码。我不希望它换行，我希望黄色 (#FFFFCC) 框具有文本的尺寸。如果我设置浮动属性，就会发生这种情况。因为它是我得到一个固定宽度的框和代码溢出的 cmets。丑陋。我也不想使用滚动。有什么想法吗？
实际上我在dreamweaver 中将white-space 属性设置为nowrap 并且显示效果很好，但是在firefox (3.5) 中我看到一大行文本并且框的宽度仍然是固定的。在 ie6 中相同，但框具有线的宽度。欢迎来到 CSS 我猜。帮助
我将 white-space 属性设置为 pre-wrap ：在 dreamweaver (CS3) 中，文本仍然溢出，但在 ie6 中我得到了我想要的。在 Firefox 中，文本换行，但不再溢出。现在有没有办法将 ie6 图片（可能由于一些错误）转移到 ff ？
你有网址吗？
上传的图片请看 :)

【解决方案3】：

我做到了（ff 3.5，opera 10，ie8 但不是 ie6（ie7 未测试））

我将不同的部分包装在 div 标签中，如下所示 - 在 ie6 中，div 以小宽度显示（当它们包含 h3 标签时），pre 标签不受影响。在其他浏览器中，div 会随着页面缩小 - 而 pre 标签也不受影响。我遇到的另一个小问题是右边距没有显示在 pre 标签中。我已经在这些上发布了another question

所以html的结构是：

<html>
 <head></head>
 <body>
  <div>...</div>   //this div is ok in ie
  <div><h3>Title...</h3>...</div>    //this div is shrunken
  ...
  <div><h3>Title...</h3>...</div>    //this div is shrunken
  <pre></pre>
  <div><h3>Title...</h3>...</div>    //this div is shrunken
  ...
  <div><h3>Title...</h3>...</div>    //this div is shrunken
 </body>
<html>

样式为：

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

【讨论】：

【解决方案4】：

    white-space: pre-wrap;

只需将其添加到您的 CSS 中

【讨论】：