CSS, чтобы заставить отображение XML поддерживать переводы строки, но переносить перенос слов

Question

У меня есть файл XML, который я пытаюсь отобразить исключительно путем добавления CSS.

XML имеет много элементов, которые выглядят так:

<text>
this is some text.

Yeah, some text.
</text>

<text>
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. 
</text>

Я хочу, чтобы CSSсохранить разрывы строк, но автоматически переносить текст.

Если мой CSS выглядит следующим образом:

text {
    white-space: pre;
}

Я получаю пустые строки, но текст выходит за пределы правого поля.

если мой CSS выглядит следующим образом:

text {
    width: 500px;
}

Я получаю обертку, но теряю пустые строки.

Есть ли способ получить оба?

Answer 1

Ответ, который дал Алекс, верен, но я все еще хочу проработать его ответ.

Использование white-space: pre-wrap; точно так же, как использование <pre>, за исключением того, что оно будет естественным образом переносить строки в соответствии с границами своего родителя. Использование white-space: pre;, насколько мне известно, не будет уважать ваши границы. И, конечно же, вам нужна кросс-браузерная совместимость.

Я считаю, что это то, что вы хотите:

    #log {
        white-space: pre-wrap;       /* CSS3 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }

Answer 2

Если у вас есть white-space: pre, текст сохраняется как есть со всем форматированием (несколько пробелов не усекаются до одного), поэтому ваши длинные строки текста не разбиваются.

Вы можете использоватьwhite-space: pre-line чтобы получить то, что вы хотите.Имейте в виду, что он не работает в Источник .

Пример

jsFiddle .

Дополнительная литература .

Answer 3

Это мой хакерский обходной путь CSS - динамические текстовые переносы, если есть пробел. Если пробела нет, содержащий элемент расширяется, чтобы соответствовать содержимому:

text {
  width: 120px; /* sets the width text will wrap into if there are spaces */
  display: table-cell; /* expands the element to fit text if it can't break */
}

Перерывы соблюдаются.

Answer 4

Как насчет этого:

text {
    white-space: pre;
    width: 500px;
}