你也可能要考虑 max-height 指定最大高度，以及 overflow:auto 允许所有的滚动条，来避免代码块过高。
也许该让它自适应
一些人，可能包括你，既不喜欢折行也不喜欢滚动条。这种情况也有解决方案。你可以让 <pre> 保持默认的容器宽度，但是允许它在交互的时候展开：
1 2 3 4 |
|
如果在 email 中怎么办？
也许因为某些原因，你的 HTML 在 email 中使用。一些标签在 email 中可能会有问题，因为你的 css 在 email 中不生效，因此当特别长的不换行的文本存在时，可能会破坏掉 email 的布局。
在 CSS-Tricks, 我必须要用 RSS feed 自动生成电子报刊，因此我生成 RSS feed 时要一个特殊处理 HTML，保证对所有的 <pre> 标签强制添加一个 inline 样式如下：
1 |
|
这是我所能做的保证代码块中很长的一行不会破坏掉布局。（一般我们除了加上面的那个外，还加上 word-wrap: break-word 和 word-break: break-all ―― 译者注）
你需要代码语法高亮吗？
网上不乏各种语法高亮方案，你可以搜索自己喜欢的方案。我个人推崇 Prism.js，因为：
它代码量少。
它无依赖。
它对标签的 class 起名起的好。
它允许你 copy 它的代码自己修改和定制。
除非从 server 端直接生成 <span> 的样式（用来语法分色），不然 Prism.js 已经足够好了。
你标注了代码是什么语言了吗？
我个人比较喜欢在代码块上标准出使用的语言。
比如：
标记出语言的其中一种方式是通过 data-* 属性（可能你的语法高亮工具也已经要求你标记出）然后显示它，例如：
1 2 3 |
|
1 2 3 4 |
|
我想这也不是一种特别简单的方法，所以可能一些人只是简单在代码里注释一下。也许用 title 属性是更好的选择？
控制空格
如果你使用 tab 来缩进，你可能会觉得缩进太宽了。
默认情况下，tab 被按照 8 个空格来渲染，这很荒唐。
在写代码的时候，我们通常让 tab 宽度为 4 个空格。幸运地，你可以用样式控制它：
1 2 3 |
|
就我个人而言，我喜欢直接用空格缩进。
其他选择
努力让代码块很好地展示在网页上可不是一件琐事，它是值得做的工作。如果你不想自己做这些工作，CodePen 提供了内嵌版可以很好地演示代码（还可以预览），内嵌 GitHub Gists 也是一个不错的选择。
以上就是使用 pre 标签样式的注意事项的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
如何给html中的pre标签中的文字换行？html pre标签的使用实例
html pre标签的作用是什么？html pre标签用法及其属性详解
更多相关阅读请进入《pre》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
