Совместимое с браузером перенос слов и пробелы: pre?

Мне нужен текст в div, который нужно сохранить и обернуть. До сих пор мне сложно найти решение. Лучшее решение, которое я смог найти, не работает для всех браузеров.

В Chrome и IE6 + работает следующее, но в Firefox текст не обертывается.

 white-space: pre; 
 word-wrap: break-word;

Я обнаружил, что по какой-либо причине текст не переносится в Firefox с белым пространством: pre. И -moz-pre-wrap не работает в Firefox 3.5 (почему?), Только pre-wrap. НО, когда я добавляю pre-wrap в список, IE 6 и 7 не работают. Очень расстраивает.

Код:

.introsub {
  position: relative;
  top: 30px;
  left: 25px;
  width: 550px;
  font-weight: normal;
  line-height: 1.5em;
  overflow: auto;
  margin: 0;
  padding: 1.5em; 
  white-space: pre; 
  word-wrap: break-word;
}

Ответ 1

Свойства CSS3 не всегда работают так, как мы хотели бы, чтобы они работали:). Тем не менее, я не вижу смысла в смешивании white-space:pre и word-wrap:break-word.

Первый не будет обертывать текст, если не встречается тег <br />. Второй будет делать обратное: сломать слова всякий раз, когда это необходимо, даже в середине слова. Они, похоже, находятся в конфликте, и наиболее очевидные ответы на вопрос о том, почему разные браузеры по-разному реагируют на эти свойства, заключаются в том, что

они поддерживают одно из двух свойств
поскольку они конфликтуют, приоритет undefined или разный в каждом браузере

(я не могу быть уверен, хотя, я не очень эксперт здесь).

Я предлагаю вам более внимательно рассмотреть this и this, а затем принять решение о том, что должно использоваться в вашем конкретном случае.

[EDIT]

Возможно, вы захотите попробовать (должны работать во всех браузерах):

white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* ancient Opera */
white-space: -o-pre-wrap; /* newer Opera */
white-space: pre-wrap; /* Chrome; W3C standard */
word-wrap: break-word; /* IE */

Я не тестировал это, но я считаю, что он должен сделать трюк для вас.

Ответ 2

Я знаю, что это очень старая проблема, но поскольку я только что столкнулся с ней, я чувствую желание ответить.

Мое решение:

Используйте white-space: pre-wrap;, поскольку это почти то же самое, что и white-space: pre;, просто добавляет строки. (ссылка: http://www.quirksmode.org/css/whitespace.html)

Тогда я бы специально нацелился на старое, то есть с условными комментариями (ссылка: http://www.quirksmode.org/css/condcom.html) или с помощью браузеров css hacks (http://paulirish.com/2009/browser-specific-css-hacks/).

Пример для второго метода:

.introsub {
  position: relative;
  top: 30px;
  left: 25px;
  width: 550px;
  font-weight: normal;
  line-height: 1.5em;
  overflow: auto;
  margin: 0;
  padding: 1.5em; 
  white-space: pre-wrap; 
  word-wrap: break-word;
}

/* IE6 and below */
* html .introsub  { white-space: pre  }

/* IE7 */
*:first-child+html .introsub { white-space: pre  }

Этого достаточно, чтобы заставить его обернуть.