IE8 在换行中重复文本 <pre>标签

IE8 在换行中重复文本

标签

发布于 2024-08-21 21:56:51 字数 1852 浏览 4 评论 0原文

我有一个网页，我将文本放入“div”内的“pre”标签中，该标签随窗口大小调整大小。如果“div”太小以至于“pre”中的文本水平溢出，我希望文本在断字处换行。

下面是演示该问题的 html：

<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
</head>
<body>
<style type="text/css">
pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
}
</style>
<div id="test">
<pre>
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
</pre>
</div>
<script type="text/javascript">
//<![CDATA[
$(function() {
    $(window).resize(function() {
        $("#test").height($(window).height() - $("#test").offset().top - 20 + "px");
        $("#test").width($(window).width() - $("#test").offset().left - 20 + "px");
    });
    $(window).resize();
});
//]]>
</script>
</body>
</html>

这在我测试过的 Firefox、Safari 和 Chrome 版本中运行良好，但在 IE8 中出现一些重复的文本。

第一行重复了“宽度”一词。有什么想法如何解决这个问题吗？

原文

I have a webpage where I put a text into a "pre" tag that is inside a "div" that resizes with the window size. If the "div" is so small that the text in the "pre" overflows horizontally, I want the text to wrap at a word break.

Here is the html that demonstrates the problem:

<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
</head>
<body>
<style type="text/css">
pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
}
</style>
<div id="test">
<pre>
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
</pre>
</div>
<script type="text/javascript">
//<![CDATA[
$(function() {
    $(window).resize(function() {
        $("#test").height($(window).height() - $("#test").offset().top - 20 + "px");
        $("#test").width($(window).width() - $("#test").offset().left - 20 + "px");
    });
    $(window).resize();
});
//]]>
</script>
</body>
</html>

This works fine in the versions of Firefox, Safari and Chrome that I've tested, but I get some duplication of text in IE8.

The first line has the word "width" repeated. Any ideas how to address this?

分享到QQ

分享到微博