Установка тега <code>в качестве стиля шрифта по умолчанию для класса

Question

Есть ли способ иметь класс CSS для анализа ввода текста, как если бы он был предварительно отформатирован, как если бы это был тег <pre>? Под этим я подразумеваю моноширинный, но также с возможностью иметь отступ текста и несколько смежных пробелов.

Answer 1

Подход, который работает на практике в современных браузерах, но без гарантии универсальной работы:

.codelike { font-family: monospace; }

В CSS нет способа узнать, какой шрифт браузер использует по умолчанию для code элементы, или для pre элементов (не ясно, какой из них вы имеете в виду).Однако на практике браузеры, похоже, используют тот же шрифт, что и для реализации общего имени шрифта monospace.Но это не является обязательным требованием, и они вполне могут использовать что-то другое и другой шрифт для pre, чем для code.

Обратите внимание, что если вы поставите любое имя шрифта перед именем общего шрифта, то выобычно при написании таблицы стилей это нарушит эту идею.Различные браузеры имеют разные моноширинные шрифты по умолчанию, и пользователь часто может их изменять.

С другой стороны, если вы просто хотите иметь одинаковое моноширинное пространство для code, pre и вашего классаэто просто, например,

code, pre, .codelike { font-family: Consolas, Courier New, monospace; }

Обратите внимание, что браузеры по умолчанию обычно применяют уменьшенный размер шрифта для таких элементов, как code и pre, предположительно для компенсации обычно большего размера символов в моноширинных шрифтах, чем вдругие шрифты (при использовании того же размера шрифта).Невозможно точно описать это в CSS, поскольку это зависит от браузера и частично недокументировано, но при желании его можно легко переопределить, например,

code, pre, .codelike { font-size: 100%; }

Answer 2

.myclass {
  white-space: pre;
  font-family: Courier New, monospace;
}