IE8 duplicates text in wrapping <pre> tags
I have a webpage where I put a text into a "pre" tag that is i开发者_JS百科nside 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?
I found the answer here: http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/
In one of the later updates, a width is included on the pre tag, which seems to resolve this problem.
加载中,请稍侯......
精彩评论