Html 预标记-文本溢出框_Html_Css_Text_Tags_Pre

Html 预标记-文本溢出框

html css text tags

Html 预标记-文本溢出框,html,css,text,tags,pre,Html,Css,Text,Tags,Pre,我已将以下样式应用于pre元素：文本溢出了框。当我应用float:right属性时，框的行为与预期一致，但在大屏幕中，其余的框自然地在框周围浮动。不高兴。EDIT2：我用float+clear实现了它（但对于ie6）。我已经发了我不熟悉CSS和HTML-我相信有一个简单的解决方案。请帮忙。 :( 编辑：更接近标记： pre { background-color: #FFFFCC; border: 2px dashed #FF6666; padding-top

我已将以下样式应用于

pre

元素：

文本溢出了框。当我应用

float:right

属性时，框的行为与预期一致，但在大屏幕中，其余的框自然地在框周围浮动。不高兴。EDIT2：我用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

带有

空白：pre；

ie6：

ff 3.5：

对于

空白：预包装；

firefox包装和ie保持不变。如何在ff中获得ie行为（代码框的自动扩展）

EDIT2：除了分号问题，pre标签所做的一件重要事情是将CSS设置为“nowrap”（或者我想是“pre”，但这会让事情变得混乱），因此它的工作方式与它应该的完全一样。如果你想阻止它这样工作，请设置“nowrap:normal”。但是，这使得pre元素的工作方式与其他元素类似，而不是它的预期工作方式，这可能会让其他与您一起工作的人感到困惑。为什么不使用div元素呢？您想实现什么目标？

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

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

的宽度至少为20个字符，如果文本的最长行为200个字符，那么它应该拉伸以容纳200个字符

<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>

如果这些假设是正确的，那么你就不能——至少在没有javascript的情况下——做你想做的事情，因为这需要根据父元素的子元素的宽度来设置父元素的宽度。不幸的是，CSS会级联到DOM中，而且是单向的

如果没有JS，您最好添加：

溢出：滚动；/*或自动*/

或：

overflow-x：滚动；

这将保持

的宽度，但允许滚动以允许最长的行保持未包装状态

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;
}

如果我误解了你的问题，请发表评论，我会尽我所能更有效地回答你的问题。

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

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

因此，html的结构是：

    white-space: pre-wrap;

只需将此添加到您的css中即可

显示一些代码。我不想将其包装，我想要黄色（#FFFFCC）框具有文本的尺寸。如果我设置float属性，就会发生这种情况。事实上，我得到一个固定宽度的框和代码溢出的注释。丑陋。我也不想使用滚动。有什么想法吗？实际上我在dreamweaver中将空白属性设置为nowrap，它显示得很好，但在firefox（3.5）中显示得很好我看到一个巨大的文本行，框仍然有固定的宽度。在ie6中相同，但框有行的宽度。我想欢迎使用css。帮助我在dreamweaver（CS3）中将空白属性设置为pre-wrap:in文本仍然溢出，但在ie6中我得到了我想要的。在firefox中，文本进行了包装，但不再溢出。现在有没有办法将ie6图片（可能是由于一些错误）发送到ff？你有我们可以查看的url吗？上传的图像pz看看：）你为什么要使用PRE标记？为什么不使用包含所需CSS的DIV（如有必要）一个预标记，用于保存文本，并保持您可能希望的刚性空白完整？此css是什么？我希望框根据其中的文本缩小或加宽。我将尝试并发回。是否尝试使用“更接近标记代码”的div方法作为类样式附加。文本仍然用ff包装。那么，在预格式化时，是否有办法使框缩小或加宽文本？空格：pre；很遗憾，文本溢出了框。谢谢！您读对了。因此ie的行为是一个bug？因为这是我所知道的唯一值得复制的bug。我不支持overflow属性-我需要js来复制ie bug？任何关于bug的文档（链接）都会非常有用。顺便说一句，谢谢（也感谢编辑）并解释为什么float:left可以完成任务！我将对此进行实验，并且很清楚-也许我会按照自己的方式完成：）我不确定为什么

float:left

做这项工作，可能是因为

float

将元素从文档流中移除，并移除元素继承其父元素宽度的约束？但这只是一个猜测，我当然不能用证据来支持它。如果其他人能纠正我，我很想知道。我是wrapped Div中的自述文件部分向左浮动，并且“清除：两者都是”，它的工作原理完全符合我在ff 3.5和opera 10中的要求-但是现在ie6对Div的宽度进行了相当大的限制（？！）有任何修正吗？

    white-space: pre-wrap;