聊一聊是什么让你们坚定的走下去(聊一聊生活中无处不在的网络)

当我们想要保持文本格式时，我们经常使用pre标签。比如我们想展示源代码的时候，只要放一个pre标签，然后直接复制粘贴源代码，然后就可以在页面上保持格式了。它不会像在其他标签中那样自动折叠换行符和空框。下面来看看pre是如何工作的。

预标签

HTML中的Pre元素，它可以定义预先格式化的文本。pre元素中的文本保留空网格和换行符。文本显示为等宽字体。
我们来看一个例子。我这里用了一段css代码，你可以把它改成别的。如下所示:

当我们用pre包装它们时，

会在浏览器上直接得到

可以看出上面的tab，空格，换行都完整的保留下来了。
我们可以把这段css代码放到其它元素下，如得到下面的图。

很完美，以后就可以用pre来标识代码了。哪里想用放哪里，但这里还有一些可以优化。您将直接在浏览器中获得

。很完美，以后还可以用pre来识别代码。想放哪就放哪，不过还是有一些可以优化的地方。

语义化

Pre元素不能放在代码中。里面有什么？它可以是歌词、代码或其他文本。当使用pre元素展示源代码时，最好的方法是用code元素包装代码，这样既能保持格式又能表示语义。例如，上面的代码可以重写为:

嵌套的html其他标签

pre中最好不要包含可以断段的标签(比如:p，title)。虽然主流浏览器对此分析没有问题，但最好不要这样使用。存在语义不清楚的情况，例如，无法判断您是想要显示结构的不同显示，还是想要将标签显示为代码的一部分。这里最好只包含代码文本，并对与' >'对应的' >'等标记进行转义。
pre元素中允许的文本可以包括物理样式和基于内容的样式更改，以及链接、图像和水平分隔符。当其他标签被放置在pre块中时，它们将被直接呈现为普通元素。
示例如下:

显示出来样式如下：
显示的样式如下:

问题

文本过长时溢出。

如果我们放在pre中的文本太长，中间没有换行，因为pre会保持文本的格式，所以文本会溢出。
演示如下:

浏览器中的表现

解决方法1：给pre标签定义横向滚动条浏览器中的呈现

解决方案1:为pre标签定义一个水平滚动条。

解决方案2:使用文本换行
直接将pre标签中css属性空白的值定义为pre-wrap。

呈现html元素

上面已经提到过，html元素会在pre标签中直接被解析。如果我们想显示这些标签，只要把这些特殊符号转换为符号实体，就可以了。如： "