Question

我有一个网页，我将文本放入“pre”标签中，该标签位于“div”内，并根据窗口大小调整大小。如果“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中得到了一些文本重复。

http://img683.imageshack.us/img683/5350/width.jpg

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

Answer 1

我在这里找到答案：http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/

在以后的某个更新中，pre标记中包含一个宽度，这似乎可以解决此问题。

IE8复制包装<pre> tags</pre>中的文本

1 个答案: