什么是预格式化文本?

这里如何在HTML代码中使用预格式化文本标签

当您将文本添加到网页的HTML代码中时,例如在段落元素中,您几乎无法控制文本行将被破坏的位置或将要使用的间距。 这是因为网页浏览器会根据需要根据包含它的区域流动文本。 这包括响应式网站 ,这些网站会根据用于查看页面的屏幕大小来更改流畅的布局。

一旦HTML文本到达其包含区域的末尾,HTML文本就会在它需要的地方打破一条线。 最终,浏览器在确定文本如何突破的过程中扮演着更重要的角色。

在添加间距以创建特定格式或布局方面,HTML无法识别添加到代码的间距,包括空格键,制表符或回车符。 如果你在一个单词和后面的单词之间放置了二十个空格,那么浏览器将在那里只显示一个空格。 这就是所谓的空白崩溃,它实际上是HTML的概念之一,许多新兴行业最初与之斗争。 他们希望HTML空白能像Microsoft Word这样的程序工作,但这不是HTML空白的工作方式。

在大多数情况下,正常处理任何HTML文档中的文本正是您所需要的,但在其他情况下,您可能实际上需要更多地控制文本如何空出来以及它在哪里断开线条。

这被称为预格式化文本(换句话说,您指定格式)。 您可以使用HTML预标签将预格式化的文本添加到您的网页中。

使用
标签 

多年前,过去常见的是带有预格式化文本块的网页。 使用pre标签来定义页面的各个部分,这是通过打字本身进行格式化的,这对网页设计师来说是一种快速而简单的方法,可以让文本按照他们的意图进行显示。

这是在CSS布局的崛起之前,当网页设计师被困在试图通过使用表格和其他纯HTML方法强制布局的时候。 这(有点)回退,因为预格式化文本被定义为其中的结构是由印刷术约定而不是由HTML呈现定义的文本。

今天,这个标签的用处不大,因为CSS允许我们以比HTML更强大的方式来指定视觉样式,因为Web标准规定了结构(HTML)和样式(CSS)的明确分离。 尽管如此,可能有一些情况是预先格式化的文本是有意义的,例如您希望强制换行的邮寄地址,或者是对于阅读和内容整体流程而言不可或缺的换行的诗歌示例。

以下是使用HTML

标记的一种方法: 

 Twas brillig和slithey toves在wabe中做过旋转和旋转 

典型的HTML会折叠文档中的空白区域。 这意味着本文中使用的回车符,空格和制表符将全部折叠为一个空格。 如果您将以上引用输入到典型的HTML标记(如p(段落)标记)中,则最终只会显示一行文本,如下所示:

Twas brillig和裂缝趾甲在Wabe中做了旋转和g Did

pre标签原样留下空白字符。 因此,换行符,空格和制表符都保留在浏览器对该内容的呈现中。 把这个引号放在pre标签里面,就可以得到这样的结果:

Twas brillig和裂缝趾甲在Wabe中做了旋转和g Did

关于字体

pre标签不仅仅是为您编写的文本维护空格和中断。 在大多数浏览器中,它是以等宽字体编写的。 这使得文字中的字符宽度均相等。 换句话说,这封信占据了字母w的空间。

如果您希望使用另一种字体来代替浏览器显示的默认等宽字体,则仍然可以使用样式表更改此字体,并选择您希望呈现文本的任何其他字体

HTML5

有一点需要注意的是,在HTML5中,

元素不再支持“width”属性。 在HTML 4.01中,宽度指定了一行可能包含的字符数,但是对于HTML5以及更高版本,这已经被删除。 

由Jeremy Girard于2/2/17编辑