Атрибут style тега <pre>

Описание

Атрибут style для тега <pre> позволяет задавать CSS-стили непосредственно для блока предварительно форматированного текста. Эти стили применяются только к конкретному элементу и имеют высокий приоритет.

Пример использования:
<pre style="background: #f8f8f8; border-left: 4px solid #42b983; padding: 1em; overflow-x: auto;"> // Пример кода с inline-стилями function hello() { console.log("Hello, world!"); } </pre>

Ключевые особенности:

Аспект Описание
Приоритет Стили имеют высокий приоритет (кроме !important)
Область действия Только для текущего элемента <pre>
Синтаксис CSS-правила через точку с запятой

Часто используемые стили:

  • white-space: pre-wrap - перенос длинных строк
  • background - цвет фона блока
  • font-family: monospace - моноширинный шрифт
  • overflow-x: auto - горизонтальная прокрутка при необходимости
  • border - рамка вокруг блока

Пример с переносом строк:

<pre style="white-space: pre-wrap; word-wrap: break-word;"> Очень длинная строка которая должна переноситься автоматически чтобы не выходить за границы контейнера и оставаться читаемой. </pre>

Динамическое изменение стилей:

<pre id="dynamic-pre">Пример текста</pre> <button onclick="changeStyle()">Изменить стиль</button> <script> function changeStyle() { const pre = document.getElementById('dynamic-pre'); pre.style.backgroundColor = '#ffe6e6'; pre.style.border = '2px dashed red'; } </script>

Рекомендации:

  • Используйте для разовых стилевых правок
  • Для сложной стилизации выносите CSS в отдельные правила
  • Избегайте !important в inline-стилях
  • Для тем оформления используйте классы

Ограничения:

  • Нет поддержки медиа-запросов
  • Нельзя использовать псевдоклассы
  • Усложняет поддержку кода

Примечание: Хотя inline-стили удобны для быстрого прототипирования, в production-коде рекомендуется использовать внешние CSS-файлы или теги <style> для лучшей поддерживаемости и производительности.