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?
