预标记 - 文本溢出框

发布于 2024-08-22 19:51:48 字数 1815 浏览 9 评论 0原文

我已将以下样式应用于 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：我用float+clear做到了（但对于ie6）。我发布了关于新错误的另一个问题< /a>

我是 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 的样式化 pre 标签的图像

：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 行为（代码框的自动扩展）？

EDIT2：参见下面的答案

原文

I have applied the following style to the pre element:

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

The text overflows the box.
When I applied the float:right property the box behaved as expected but in large screens the rest floated around the box naturally. Not happy. EDIT2 : I made it (but for ie6), using float + clear. I have posted another question on the new bugs

I am new to CSS and HTML - I am sure there is a simple solution. Please help.
:(

EDIT : closer to the mark :

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

This one displays exactly as I want in ie6 - in ff 3.5 the text wraps - I know this is is the way it should be - but how can I carry the ie behavior to ff ?

Images for the styled pre tag with 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

for white-space: pre-wrap; firefox wraps and ie stays the same. How can I get the ie behavior (autoexpanding of the code box) in ff ?

EDIT2 : see answer below

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

打小就很酷 2024-08-29 19:51:48

    white-space: pre-wrap;

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

    white-space: pre-wrap;

Just add this to your css

回复收藏 0 原文

始终不够 2024-08-29 19:51:48

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

因此，如果您的文本最长行有 20 个字符，则

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

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

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

overflow:scroll; /* 或 auto */

或：

overflow-x:scroll;

到您的 CSS，这将保持

 的宽度，但允许用于滚动以允许最长的行保持未换行。

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

回复收藏 0 原文

恬淡成诗 2024-08-29 19:51:48

除了分号问题之外，pre 标记所做的一件重要的事情是将 CSS 设置为 white -space 属性为“nowrap”（或者我想是“pre”，但这只会让人困惑），所以它的工作方式完全符合预期。如果你想阻止它这样工作，请设置“nowrap：正常；”。然而，这使得 pre 元素像其他所有元素一样工作，而不是按照其预期的方式工作，这可能会让与您一起工作的其他人感到困惑。为什么不直接使用 div 元素呢？你想达到什么目的？

回复收藏 0 原文

乞讨 2024-08-29 19:51:48

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

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

I made it (ff 3.5, opera 10, ie8 but not ie6 (ie7 not tested))

I wrapped the different sections in div tags styled as seen below -in ie6 the divs display with small width (when they include a h3 tag), the pre tag is not affected. In the other browsers the divs shrink with the page - while the pre tag is not affected also. Another small issue I'm having is the right margin not displaying in the pre tag. I have posted another question on these

So the structure of the html is :

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

styled as :

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

回复收藏 0 原文

~没有更多了~