Сохраняем пробелы в div через CSS: эмуляция <code>pre</code>

Быстрый ответ

Для сохранения пробелов и переводов строк в HTML задайте свойству white-space в CSS значение pre;. Таким образом, вы сможете добиться эффекта, как при использовании тега <pre>.

.pre {
  white-space: pre;
}

Добавьте класс class="pre" нужному вам элементу:

<div class="pre">Ваш предформатированный текст здесь.</div>

Более того, для того чтобы сделать ширину символов одинаковой, как в теге <pre>, задайте моноширинный шрифт:

.pre {
  white-space: pre;
  font-family: monospace; // Постоянное расстояние между символами!
}

Дополнительные возможности работы с предформатированным текстом

Использование тега <code> для подсветки синтаксиса

Для выделения строк кода в тексте используйте тег <code>, чтобы подчеркнуть встроенные фрагменты кода:

<p>При отладке помогает функция <code>console.log()</code>.</p>

Для оформления выделенного кода используйте CSS:

code {
  background-color: #f9f9f9;
  border: 1px solid #d1d1d1;
  padding: 2px 4px;
  border-radius: 3px;  // Скругление углов для визуальной мягкости.
}

Подробнее об этом расскажет наш спикер на видео

Работа с длинным текстом

Если текст не помещается в границы контейнера, используйте white-space: pre-wrap; для сохранения форматирования и добавления переносов:

.pre-wrap {
  white-space: pre-wrap;
  overflow-wrap: break-word; // Перенос слов, если они выходят за границы.
}

Различия между встроенными и блочными элементами: важные детали

Предформатированный текст предпочтительно использовать с блочными элементами. Запомните это при отображении:

.pre {
  white-space: pre;
  display: block;  // Блочное отображение обеспечивает корректное форматирование.
}

Без display: block; встроенные элементы, такие как <span>, могут вести себя некорректно.

Когда тег <pre> — не лучший выбор

Управление стилями с помощью <div>

Если требуется больше возможностей для стилизации, чем предоставляет <pre>, лучше использовать CSS:

• Если <pre> ограничивает использование пользовательских шрифтов или других стилей.
• Когда вы хотите применить уникальные цвета или фоновые изображения.
• Если стандартные внешние отступы <pre> не вписываются в установленную вами структуру дизайна.

Семантика и доступность

Обеспечивайте доступность предформатированного текста. Применяйте принципы семантического HTML и используйте роли ARIA для помощи скринридерам в корректном восприятии текста.

Визуализация

Воспринимаем HTML-элемент как холст (🎨). С помощью white-space: pre; вы можете сохранить каждый символ таким, каким вы его разместили:

Без `white-space: pre;`:
🎨 "Текст с
    неравномерным расстоянием."

С `white-space: pre;`:
🖼️ "Текст сохранён
    точно так, как вы его первоначально разместили."

/* Защита CSS */
canvas {
  white-space: pre; /* Сохраняет пробелы и переносы строк */
}

Свойство white-space: pre; позволит вам достигнуть точности в отображении текста 🖼️✨.

Полезные материалы

1. Make "Pre" Text Wrap | CSS-Tricks — Статья с методами оформления предформатированного текста с помощью CSS.
2. <pre>: The Preformatted Text element – HTML | MDN — Обзор элемента <pre> и рекомендации по его использованию в HTML.
3. white-space – CSS | MDN — Подробный обзор свойства white-space CSS и его применения.
4. CSS white-space property — Интерактивные примеры для лучшего понимания white-space.
5. CSS white-space Property – CSS Portal — Ресурс для экспериментов и обучения использованию свойства CSS white-space.
6. white-space | Codrops — Детальный обзор различных аспектов свойства white-space в CSS.