У меня есть веб-страница, где я помещаю текст в тег «pre», который находится внутри тега «div», размер которого изменяется в зависимости от размера окна. Если «div» настолько мал, что текст в «pre» переполняется по горизонтали, я хочу, чтобы текст переносился при разрыве слова.
Вот HTML, который демонстрирует проблему:
<code><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.
// <! [CDATA [
$ (function () {
$ (window) .resize (function () {
$ ("# test"). height ($ (window) .height () - $ ("# test"). offset (). top - 20 + "px");
$ ("# test"). width ($ (window) .width () - $ ("# test"). offset (). left - 20 + "px");
});
$ (Окна) .resize ();
});
//]]>
Это прекрасно работает в версиях Firefox, Safari и Chrome, которые я тестировал, но я получаю некоторое дублирование текста в IE8.
В первой строке повторяется слово "ширина". Есть идеи как решить эту проблему?