2

我已将以下样式应用于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。我已经发布了关于新错误的另一个问题

我是 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 ？

带有样式的 pre 标签的图像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：见下面的答案

4

4 回答 4

3

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

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

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

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

overflow: scroll; /* or auto */

或者：

overflow-x: scroll;

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

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

于 2010-02-26T00:50:11.283 回答
1

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

于 2010-02-25T21:05:22.783 回答
0

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

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

所以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;
}
于 2013-12-10T15:54:29.893 回答
0 
    white-space: pre-wrap;

只需将其添加到您的 CSS

于 2021-03-23T15:28:21.303 回答