pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
< pre > 标签的一个常见应用就是用来表示计算机的源代码。
演示
<pre> 此例演示如何使用pre标签 对空行 和空格 进行控制
pre> 效果如下：
此例演示如何使用pre标签 对空行 和空格 进行控制
需要注意的是
- pre元素是块级元素，但是只能包含文本或行内元素。也就是说，任何块级元素（常见为可以导致段落断开的标签）都不能位于pre元素中。
- pre元素中允许的文本可以包含物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签，比如标签放到
块中时，就像放在HTML/XHTML文档的其他部分中一样即可。
- 制表符tab在
标签定义的块当中可以起到应有的作用，每个制表符占据8个字符的位置，但并不推荐使用tab，因为在不同的浏览器中，tab的表现形式各不相同。在用
标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
- 如果希望使用
标签来定义计算机源代码，比如HTML源代码，请使用符号实体来表示特殊字符。一般将
标签与
标签结合起来使用，以获得更加精确的语义，用于标记页面中需要呈现的源代码。 - 如果想要把某一段规定好的文本格式放在HTML中，那么就要利用pre元素的特性。
<pre> <code> function cool(x) { return x 1; }
code>
pre> 对我们来说幸运地是，浏览器默认字体已经将 < pre > 设置成等宽字体，因此你可以不做任何处理。当然，你可以设置一个你喜欢的字体。
这 里有篇文章是 Michael Tuck 写于 2009 年的，他研究了“font stacks”。font stack 是说将一组字体罗列在一个 font-family 标签中，首选字体列在前面，备选字体依次列在其后。他的等宽字体 font stack 较好地利用了跨平台系统预装字体。
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 stack 在今天有没有过时，不管怎样这是一个好的开端。
另外，你可以用自定义字体。或者使用第三方服务。在我写下这篇文章的时候，Typekit 提供了 23 种等宽字体。
标签提供的独一无二的样式来保留空白同时折行，如同下面这样：
pre { white-space: pre-wrap; } 如果你不想折行，你就不用像上面那样做，不过你得考虑如果一行太长了怎么办。太长的行可能会撑开固定宽度的容器或者超出容器范围。要避免这个，我建议你加上横向滚动条：
pre { overflow-x: auto; } 
你也可能要考虑 max-height 指定最大高度，以及 overflow:auto 允许所有的滚动条，来避免代码块过高。
保持默认的容器宽度，但是允许它在交互的时候展开：
pre:hover, pre:focus { width: min-content; } 
如果在 email 中怎么办？
也许因为某些原因，你的 HTML 在 email 中使用。一些标签在 email 中可能会有问题，因为你的 css 在 email 中不生效，因此当特别长的不换行的文本存在时，可能会破坏掉 email 的布局。
在 CSS-Tricks, 我必须要用 RSS feed 自动生成电子报刊，因此我生成 RSS feed 时要一个特殊处理 HTML，保证对所有的 < pre > 标签强制添加一个 inline 样式如下：
<pre style="white-space: pre-wrap;">
pre> 是我所能做的保证代码块中很长的一行不会破坏掉布局。（一般我们除了加上面的那个外，还加上 word-wrap: break-word 和 word-break: break-all —— 译者注）
你需要代码语法高亮吗？
网上不乏各种语法高亮方案，你可以搜索自己喜欢的方案。我个人推崇 Prism.js，因为：
- 它代码量少。
- 它无依赖。
- 它对标签的 class 起名起的好。
- 它允许你 copy 它的代码自己修改和定制。
除非从 server 端直接生成 的样式（用来语法分色），不然 Prism.js 已经足够好了。
你标注了代码是什么语言了吗？
我个人比较喜欢在代码块上标准出使用的语言。
<pre data-lang="HTML"><code> <h1>Example code
h1> <code>
pre> pre[data-lang]::before { content: attr(data-lang); display: block; } 我想这也不是一种特别简单的方法，所以可能一些人只是简单在代码里注释一下。也许用 title 属性是更好的选择？
控制空格
如果你使用 tab 来缩进，你可能会觉得缩进太宽了。
默认情况下，tab 被按照 8 个空格来渲染，这很荒唐。
在写代码的时候，我们通常让 tab 宽度为 4 个空格。幸运地，你可以用样式控制它：
pre { tab-width: 4; } 就我个人而言，我喜欢直接用空格缩进。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/225069.html原文链接：https://javaforall.net
