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;
}