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属性时，该框的行为符合预期，但在大屏幕中，其余部分自然地在框周围浮动。不开心。编辑2：我做了它（但对于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 ：见下面的答案

Answer 1

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

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

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

没有JS，你可以做的最好的事情就是添加：

overflow: scroll; /* or auto */

或：

overflow-x: scroll;

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

如果我误解了您的问题，请发表评论，我会尽力解决您的问题。

Answer 2

除了分号问题之外，pre标签所做的一件重要的事情是将CSS white-space property设置为“nowrap”（或者我认为是“pre”，但这只是混淆了事情），所以它正好工作正如它应该。如果你想阻止它像这样工作，设置“nowrap：normal;”。但是，这使得pre元素像其他元素一样工作，而不是它的工作方式，这可能会使与您合作的其他人感到困惑。为什么不使用div元素？你想要实现什么目标？

Answer 3

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

我将div标签中的不同部分包装成如下所示样式-in ie6 divs显示宽度较小（当它们包含h3标签时），pre标签不受影响。在其他浏览器中，div会随页面缩小 - 而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;
}

Answer 4

    white-space: pre-wrap;

只需将其添加到您的 css

pre-text溢出框

4 个答案: