pre标签-文本溢出框外

Question

pre标签-文本溢出框外

5

我已经将以下样式应用到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：我使用了float + clear（但对ie6有效），已经发布了关于新错误的另一个问题。我对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 会换行而 ie 保持不变。如何在 ff 中获得 ie 的行为（代码框自动扩展）？

编辑2：请见下面的答案。

- Mr_and_Mrs_D

你为什么要使用 PRE 标签呢？为什么不使用一个包含所需 CSS 的 DIV，其中（如果必要）包含一个保持文本中所需刚性空格的 PRE 标签呢？ - Robusto

这个 CSS 是什么？我希望盒子能根据里面的文本收缩或扩展。我会尝试并回复。 - Mr_and_Mrs_D

尝试使用附加为类样式的“更接近标记代码”的div方法。但在ff中，文本仍然换行。因此，在预格式化时，是否有一种方式使框收缩或扩展以适应文本？不幸的是，white-space：pre；会导致文本溢出框。 - Mr_and_Mrs_D

4个回答

3

如果我正确理解你的问题，你想在一个框内显示包含代码/文本的内容，而且这些代码/文本不能自动换行（除非代码/文本本身包含换行符等）。你还希望包含元素能够根据文本/代码所需的宽度来增加其水平尺寸？

因此，如果你的文本中最长的行有20个字符，那么你的

至少应该有20个字符的宽度；如果文本中最长的行有200个字符，那么它的宽度应该扩展到200个字符。
如果这些假设是正确的，那么你不能——至少不使用JavaScript——做你想做的事情，因为它需要基于子元素的宽度来设置父元素的宽度。不幸的是，CSS只能沿着DOM向下级联，并且只能单向操作。
如果没有JS，你最好能做的就是在CSS中添加：
overflow: scroll; /* 或 auto */
或者：
overflow-x: scroll;
这将保持的宽度，但允许滚动以使最长的行保持不换行。
如果我误解了你的问题，请发表评论，我会尽力更有用地回答你的问题。

- David Thomas

谢谢！你读对了。那么ie的行为是一个bug吗？因为这是我知道值得复制的唯一一个bug。我不需要overflow属性 - 我需要js来复制ie的bug？ - Mr_and_Mrs_D

任何关于该错误的文档（链接）都将非常有用。感谢您的编辑。 - Mr_and_Mrs_D

为什么float:left能够完成这项工作？我将进行实验并清除 - 也许最终我会按照自己的方式完成 :) - Mr_and_Mrs_D

我不确定为什么 float: left 能够起到作用，可能是因为 float 把元素从文档流中移除，并且消除了元素继承其父元素宽度的限制？但这只是一个猜测，我无法用证据支持它。如果其他人能纠正我，我会很感兴趣。 - David Thomas

我将自述文件的各个部分包装在向左浮动和 clear:both 的 div 中，在 Firefox 3.5 和 Opera 10 中它的效果完全符合我的要求 - 但是现在 IE6 明显限制了 div 的宽度 (?!) 有什么解决方法吗？ - Mr_and_Mrs_D

请更新您的问题（或者，如果您认为有必要，考虑开始一个新问题），告诉我您现在的进展情况，我会在有空的时候仔细查看。 - David Thomas

1

除了分号问题之外，pre标签最重要的一件事情就是将CSS white-space属性设置为“nowrap”（或者“pre”，但那只会让事情更加混乱），所以它正好按照预期工作。如果你想停止它这样工作，可以设置“nowrap:normal;”。然而，这会使pre元素像其他元素一样工作，而不是它本来的意图，这可能会让与你一起工作的其他人感到困惑。为什么不使用div元素呢？你想要实现什么效果？

- Tom

显示一些代码。我不希望它换行，我希望黄色(#FFFFCC)的框具有文本的尺寸。如果我设置浮动属性，就会发生这种情况。现在我得到了一个固定宽度的框，代码的注释溢出了。很丑陋。我也不想使用滚动条。有什么想法吗？ - Mr_and_Mrs_D

其实我在Dreamweaver中将white-space属性设置为nowrap，结果显示得很好，但是在Firefox（3.5）中，我看到一行非常长的文本，而且盒子的宽度仍然固定。在IE6中也是一样，但是盒子的宽度与行的宽度相同。欢迎来到CSS的世界吧。请帮忙解决这个问题。 - Mr_and_Mrs_D

我在Dreamweaver（CS3）中将white-space属性设置为pre-wrap：文本仍然溢出，但在ie6中我得到了我想要的结果。在Firefox中，文本换行但不再溢出。现在有没有办法将ie6的效果（可能是由于某些错误）转移到ff？ - Mr_and_Mrs_D

你有一个我们可以查看的网址吗？ - Tom

已上传图片，请查看 :) - Mr_and_Mrs_D

我跟着 ricebowl 的意见：根据你所说的，用纯 CSS 的方法无法实现你想要的功能。 - Tom

0

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

我使用以下样式将不同的部分包装在div标签中 - 在ie6中，当它们包括h3标签时，div会显示为小宽度，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;
}

- Mr_and_Mrs_D

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alican Ali · Accepted Answer

    white-space: pre-wrap;

只需将此添加到您的CSS中。