预格式化文本pre标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

< pre > 标签的一个常见应用就是用来表示计算机的源代码。

演示

<pre>
此例演示如何使用pre标签

对空行                      和空格
进行控制
</pre>

效果如下:

此例演示如何使用pre标签

对空行                      和空格
进行控制

所谓的预格式化文本就是,按照我们预先写好的文字格式来显示页面,保留空格和换行等
有了这个标签,标签里面的文字就会按照我们书写的模式显示,不需要段落和换行标签了

需要注意的是

  • pre元素是块级元素,但是只能包含文本或行内元素。也就是说,任何块级元素(常见为可以导致段落断开的标签)都不能位于pre元素中。
  • pre元素中允许的文本可以包含物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签,比如标签放到
    块中时,就像放在HTML/XHTML文档的其他部分中一样即可。
  • 制表符tab在
    标签定义的块当中可以起到应有的作用,每个制表符占据8个字符的位置,但并不推荐使用tab,因为在不同的浏览器中,tab的表现形式各不相同。在用
    标签格式化的文档段中使用空格,可以确保文本正确的水平位置。
  • 如果希望使用
    标签来定义计算机源代码,比如HTML源代码,请使用符号实体来表示特殊字符。一般将
    标签与标签结合起来使用,以获得更加精确的语义,用于标记页面中需要呈现的源代码。
  • 如果想要把某一段规定好的文本格式放在HTML中,那么就要利用pre元素的特性。

知道了这,那么有趣的就来了
我们可以在< pre >标签里使用< code >标签
因为< pre > 标签的 “pre” 的意思是 “preformatted text”(预格式化的文本),没有特别规定里面的文本是什么内容。< code > 标签的语义表示其中的文本是代码。这对我来说尤其有用,当我需要显示一段代码时,使用它们,下面是一个例子:

	<pre>
		<code>
		function cool(x) {
			return x   1;
		}
		</code>
	</pre>

解释一下:在< pre >< code >和代码之间有一个换行,而这也会被显示成一个空行,这非常讨厌。没有非常好的 CSS 方法来解决这个问题,最好的方法是与 < pre > 标签同一行开始代码,或者用编译程序来去除这里的换行。
在这里插入图片描述
选择一个字体
 由于 < pre > 标签主要是用来显示代码块,而代码通常使用等宽字体,因此将 < 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 种等宽字体。

折行还是不折行?
  这有关个人偏好,对我个人来说,分两种情况。

当我自己在编辑器写代码时,我倾向于让代码自动折行而不出现水平滚动条。而当我在文章中阅读代码时,我喜欢代码不折行。我知道这很奇怪。在 CodePen 里,我们将折不折行提供成一个选项让用户自己选择,因为大家本来就是萝卜青菜各有所爱。
  在这里插入图片描述
在展示代码的时候,你需要选择究竟是否折行。如果你选择折行,幸运地,你可以使用为

标签提供的独一无二的样式来保留空白同时折行,如同下面这样:

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,因为:

  1. 它代码量少。
  2. 它无依赖。
  3. 它对标签的 class 起名起的好。
  4. 它允许你 copy 它的代码自己修改和定制。

在这里插入图片描述
除非从 server 端直接生成 的样式(用来语法分色),不然 Prism.js 已经足够好了。

你标注了代码是什么语言了吗?

我个人比较喜欢在代码块上标准出使用的语言。

比如:
在这里插入图片描述
标记出语言的其中一种方式是通过 data-* 属性(可能你的语法高亮工具也已经要求你标记出)然后显示它,例如:

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

就我个人而言,我喜欢直接用空格缩进。

  • 1
    点赞
  • 12
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页
评论

打赏作者

JiuMeilove

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值