Элемент отображения в виде предварительно отформатированного текста через CSS

Есть ли способ эмулировать отображение элемента pre через CSS?

Например, можно ли сохранить пробелы в этом div с помощью правила CSS?

<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>

Ответы

Ответ 1

Используйте white-space: pre, чтобы сохранить форматирование пробелов как в элементе pre. Чтобы сделать еще один шаг, добавьте font-family: monospace, поскольку элементы pre обычно устанавливаются в моноширинном шрифте по умолчанию (например, для использования с блоками кода).

.preformatted {
    font-family: monospace;
    white-space: pre;
}
<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>

Ответ 2

.preformatted {
   white-space: pre-wrap;
}

Я думаю, что "pre-wrap" лучше. Это может помочь с длинной длиной в линию.

Ответ 3

Да:

div.preformatted {
    white-space: pre;
    }

Ссылка:

Ответ 4

для получения <pre> вы можете использовать;

div.preformatted{ white-space: pre ; display: block; }