本文摘自PHP中文网，作者巴扎黑，侵删。
你可能正在使用 <pre> 标签。这是一个 HTML 中非常特别的标签，它允许其中的空格真正显示出来。例如：四个空格将真实显示成四个空格。这不同于其他标签通常的做法，其他标签会将之间的空白压缩成一个。从这一点来说，<pre>标签真的是很有用。你在 <pre> 标签中使用 <code> 标签吗？
<pre> 标签的 “pre” 的意思是 “preformatted text”（预格式化的文本），没有特别规定里面的文本是什么内容。<code> 标签的语义表示其中的文本是代码。这对我来说尤其有用，当我需要显示一段代码时，使用它们，下面是一个例子：
1 2 3 4 5 |
|
解释一下：在<pre><code>和代码之间有一个换行，而这也会被显示成一个空行，这非常讨厌。没有非常好的 CSS 方法来解决这个问题，最好的方法是与 <pre> 标签同一行开始代码，或者用编译程序来去除这里的换行。
选择一个字体
由于 <pre> 标签主要是用来显示代码块，而代码通常使用等宽字体，因此将 <pre> 的样式字体设置成等宽字体是个好主意。
对我们来说幸运地是，浏览器默认字体已经将 <pre> 设置成等宽字体，因此你可以不做任何处理。当然，你可以设置一个你喜欢的字体。
这 里有篇文章是 Michael Tuck 写于 2009 年的，他研究了“font stacks”。font stack 是说将一组字体罗列在一个 font-family 标签中，首选字体列在前面，备选字体依次列在其后。他的等宽字体 font stack 较好地利用了跨平台系统预装字体。
1 2 3 |
|
我不确定 font stack 在今天有没有过时，不管怎样这是一个好的开端。
另外，你可以用自定义字体。或者使用第三方服务。在我写下这篇文章的时候，Typekit 提供了 23 种等宽字体。
折行还是不折行？
这有关个人偏好，对我个人来说，分两种情况。
当我自己在编辑器写代码时，我倾向于让代码自动折行而不出现水平滚动条。而当我在文章中阅读代码时，我喜欢代码不折行。我知道这很奇怪。在 CodePen 里，我们将折不折行提供成一个选项让用户自己选择，因为大家本来就是萝卜青菜各有所爱。
在展示代码的时候，你需要选择究竟是否折行。如果你选择折行，幸运地，你可以使用为<pre>标签提供的独一无二的样式来保留空白同时折行，如同下面这样：
1 2 3 |
|
如果你不想折行，你就不用像上面那样做，不过你得考虑如果一行太长了怎么办。太长的行可能会撑开固定宽度的容器或者超出容器范围。要避免这个，我建议你加上横向滚动条：
1 2 3 |
|
相关阅读 >>
html pre标签的作用是什么？html pre标签用法及其属性详解
如何给html中的pre标签中的文字换行？html pre标签的使用实例
更多相关阅读请进入《pre》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
