`<pre>`标签样式的考虑因素 | CSS-Tricks

您可能用过它。它是 HTML 中一个非常特殊的标签，它允许在标签内的空白字符实际被保留。例如，四个空格实际上就是四个空格！这与 HTML 通常的工作方式不同，在 HTML 中空白字符会“折叠”（四个空格会变成一个）。<pre> 标签确实很有用。

您是否在内部使用`code`标签？

<pre>标签的“pre”字面意思是“预格式化文本”——它没有说明该文本是什么。从语义上讲，<code> 标签表示其中的文本是代码。我觉得这很有道理！我总是在放置代码块时使用它，根据我的经验，这是最常见的用例。

请注意，在上面代码块的文本开始之前有一行换行符。该换行符将呈现，这可能会非常烦人。没有很好的 CSS 方法来处理这个问题。最好的方法是将文本放在与<pre>标签相同一行开始，或以编程方式删除开头的空白字符。

选择字体

由于<pre>标签的主要用例是代码块，而代码通常是用等宽字体编写的，因此设置等宽font-family可能是一个好主意。

幸运的是，“用户代理样式表”（您在浏览器中获得的样式，无需添加任何自己的 CSS）已经设置了font-family: monospace;。因此，您可以什么都不做。或者，您可以变得花哨。

Michael Tuck 在 2009 年发表了一篇文章，探讨了“字体堆栈”。也就是说，在一个font-family声明中列出一堆字体，以便最理想的选择排在最前面，然后依次向下排列到不太理想的选择。他用于等宽字体的示例堆栈考虑了跨平台预安装字体。

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

我不确定该堆栈在当今所有平台上的效果如何，但它看起来是一个很好的起点。

或者，您可以加载您自己的自定义@font-face字体并使用它（字体堆栈仍然适用）。或者，使用服务。在我撰写本文时，Typekit 提供了23 种等宽字体。

是否换行？

这更多的是个人喜好。就我个人而言，我有点犹豫。

在代码编辑器中编码时，我更喜欢超出可见区域宽度长行换到下一行（而不是导致水平滚动）。在文章中查看代码时，我更喜欢代码不换行。很奇怪，我知道。在 CodePen 上，我们将其作为用户选项，因为全世界对他们喜欢的选项存在分歧。

在设置样式时，您需要做出选择。如果您选择换行，幸运的是，您可以保留<pre>标签保留空白字符的独特功能以及获得换行，如下所示

pre { white-space: pre-wrap; }

如果您不选择换行，则无需执行任何操作。不过，您应该考虑在遇到非常长的行时会发生什么。非常长的行会很乐意超出固定宽度的容器或意外地拉伸容器的宽度。为防止这种情况发生，我建议至少

pre { overflow-x: auto; }

如果您想避免令人讨厌的长代码块，甚至可以考虑使用max-height和总的overflow: auto;。

也许可以使其自动扩展

有些人，也许包括您，不喜欢换行和水平滚动。可能有解决方案！您可以保留<pre>块的默认块容器宽度，但在交互时允许它们扩展

pre:hover, pre:focus { width: min-content; }

这是否会用于电子邮件？

也许以某种方式，您编写的 HTML 最终会被用于电子邮件。预标签在电子邮件中可能很危险，因为您的 CSS 不适用于电子邮件（这可以帮助换行），因此会发生默认的非换行文本，并且长行可能会破坏电子邮件布局。

在 CSS-Tricks 上，当我从 RSS 订阅源自动生成电子邮件通讯时，我必须生成一个特殊的 RSS 订阅源，该订阅源将处理 HTML 并确保所有<pre>标签上都强制使用内联样式，如下所示

这样，我就尽我所能确保包含长行的代码块不会破坏布局。

您是否需要语法高亮？

语法高亮选项并不少见。您可以在网上搜索它们。就我个人而言，我比较喜欢Prism.js，因为它……

文件大小小
没有依赖项
具有有意义的类名
允许您使用仅包含所需内容的副本进行自定义。

我唯一愿意放弃 Prism.js 的是某种巧妙的方法，可以在服务器端而不是客户端注入<span>（用于着色）。

您是否标记了语言？

我个人喜欢看到用其所属语言标识的代码块。

像这样

一种方法是使用data-*属性（也许是语法高亮程序已经需要的属性）对其进行标记，然后显示它，例如

pre[data-lang]::before { content: attr(data-lang); display: block; }

我认为这不是一种特别易于访问的方法，因此也许有人可以在评论中对此发表意见。也许title属性会更好？

控制间距

如果您在<pre>标签内的文本块中使用了实际的制表符字符（而不仅仅是看起来像制表符的多个空格），您可能会惊讶于这些制表符字符的渲染宽度。

制表符默认情况下渲染为8 个空格宽，这真是荒谬。

在编码环境中，4 个空格似乎更常见。幸运的是，您可以根据自己的喜好控制它

pre { tab-width: 4; }

我个人更喜欢空格；）。

其他选项

在网站上使代码块显示得很好需要花费不少精力，但完全可行。如果您希望将这项工作留给其他人，CodePen 提供了嵌入式笔，可以很好地展示代码块（以及预览），并且嵌入式GitHub Gist也很受欢迎。