<pre>：文本保留格式化显示

向右看齐 2022-04-16 06:59 258阅读 0赞

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

## pre标签 ##

HTML里的pre元素，可定义预格式化的文本。在pre元素中的文本会保留空格和换行符。文本显现为[等宽字体][Link 1]。  
下面我们看一个示例，这里我使用的是一段css代码，你也可以换成其它的。如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>body{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background:</code><code>#fff;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font: 12px/24px 1.66;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

当我们用pre包裹它们时

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>&lt;pre&gt;body{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background:</code><code>#fff;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font: 12px/24px 1.66;</code></p> <p><code>}&lt;/pre&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

会在浏览器上直接得到  
[![1464574926745\[4\]][1464574926745_4]][1464574926745_4_1464574926745_4]  
可以看出上面的tab，空格，换行都完整的保留下来了。  
我们可以把这段css代码放到其它元素下，如得到下面的图。  
[![1464575037169\[4\]][1464575037169_4]][1464575037169_4_1464575037169_4]  
很完美，以后就可以用pre来标识代码了。哪里想用放哪里，但这里还有一些可以优化。

### 语义化 ###

pre元素并不能代码放入，里面的内容是什么，可以是歌词，可以是代码，可以是其它文本。当pre元素来展示源代码的时候最好的方式是用code元素来包裹代码，这样既可以保持格式又可以代表语义，一举数得。如上面的代码可以改写为：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </td> 
   <td> <p><code>&lt;pre&gt;</code></p> <p><code>&lt;code&gt;body{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background:</code><code>#fff;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font: 12px/24px 1.66;</code></p> <p><code>}&lt;/code&gt;</code></p> <p><code>&lt;/pre&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 嵌套html其它标签 ###

pre中最好不要包含可以导致段落断开的标签（如:p,标题），虽然主流浏览器对此解析没有问题，但最好不要这样使用。存在着语义不明的情况，比如无法判断是想显示结构的不同展示，还是想把标签作为代码的一部分显示，最好对这里只包含代码文本，对于标签进行转义如'>'对应'>'。  
pre元素中允许的文本可以包括[物理样式和基于内容的样式变化][Link 2]，还有链接、图像和水平分隔线。当把其它标签放到pre块中时，会被直接渲染为正常元素。  
示例如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> </td> 
   <td> <p><code>&lt;pre&gt;[ti:凡人歌]</code></p> <p><code>[ar:李宗盛]</code></p> <p><code>[al:凡人歌]</code></p> <p><code>[00:00](music)</code></p> <p><code>[00:28]你我皆凡人，生在人世间；</code></p> <p><code>[00:35]终日奔波苦，一刻不得闲；</code></p> <p><code>[00:43]既然不是仙，难免有杂念；</code></p> <p><code>[00:50]&lt;a href=</code><code>"#"</code><code>&gt;道义放两旁&lt;/a&gt;，利字摆中间。&lt;/pre&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

显示出来样式如下：  
[![1464577013316\[4\]][1464577013316_4]][1464577013316_4_1464577013316_4]

## 问题 ##

### 文本过长时，溢出 ###

如果我们在pre里放置的文本过长，中间也没有换行，由于pre会保持文本的格式，导致文本溢出。  
演示如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>&lt;div style=</code><code>"width:500px; background:red; padding:20px;"</code><code>&gt;</code></p> <p><code>&lt;pre&gt;[ti:凡人歌][ar:李宗盛][al:凡人歌][00:00](music)[00:28]你我皆凡人，生在人世间；[00:35]终日奔波苦，一刻不得闲；[00:43]既然不是仙，难免有杂念；[00:50]&lt;a href=</code><code>"#"</code><code>&gt;道义放两旁&lt;/a&gt;，利字摆中间。&lt;/pre&gt;</code></p> <p><code>&lt;/div&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

浏览器中的表现  
[![1464577279186\[4\]][1464577279186_4]][1464577279186_4_1464577279186_4]  
**解决方法1**：给pre标签定义横向滚动条

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>pre{ </code></p> <p><code>&nbsp;&nbsp;</code><code>overflow:auto;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**解决方法2**：使用text-wrapping  
直接定义pre标签里的css属性white-space的值为pre-wrap。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>pre{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>white-space:pre-wrap;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 渲染html元素 ###

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>&lt;pre&gt;&lt;code&gt;&amp;lt;ul&nbsp;</code><code>class</code><code>=&amp;quot;main-list&amp;quot;&amp;gt;</code></p> <p><code>&nbsp;</code><code>&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;</code><code>#&amp;quot;&amp;gt;藏新线才是最西藏的进、出线&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;</code></p> <p><code>&nbsp;</code><code>&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;</code><code>#&amp;quot;&amp;gt;藏新线才是最西藏的进、出线&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;</code></p> <p><code>&nbsp;</code><code>&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;</code><code>#&amp;quot;&amp;gt;藏新线才是最西藏的进、出线&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;</code></p> <p><code>&nbsp;</code><code>&amp;lt;/ul&amp;gt;&lt;/code&gt;&lt;/pre&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

也可以使用一些线上的工具去完成这个转义的过程，这里可以百度一下，随便找了一个截了个图  
[![1464578419416\[4\]][1464578419416_4]][1464578419416_4_1464578419416_4]

### 意外的空格 ###

有时候我们把代码直接复制到页面时，编辑器会给我们自动缩进对齐，这里其实是很好的，但这里遇到pre标签就有麻烦了，比如:

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </td> 
   <td> <p><code>&lt;div&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;pre&gt;&lt;code&gt;&amp;lt;ul&nbsp;</code><code>class</code><code>=&amp;quot;main-list&amp;quot;&amp;gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;</code><code>#&amp;quot;&amp;gt;藏新线才是最西藏的进、出线&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;</code><code>#&amp;quot;&amp;gt;藏新线才是最西藏的进、出线&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;</code><code>#&amp;quot;&amp;gt;藏新线才是最西藏的进、出线&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&amp;lt;/ul&amp;gt;&lt;/code&gt;&lt;/pre&gt;</code></p> <p><code>&lt;/div&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

结果效果如下：  
[![1464579144453\[4\]][1464579144453_4]][1464579144453_4_1464579144453_4]

建议使用下面的形式来对代码进行排版。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>&lt;div&gt;</code></p> <p><code>&lt;pre&gt;&lt;code&gt;第一行</code></p> <p><code>//中间代码进行格式化</code></p> <p><code>最后一行&lt;/code&gt;&lt;/pre&gt;</code></p> <p><code>&lt;/div&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 扩展 ##

### 定义一下tab的大小 ###

但这个IE浏览器支持情况不太好。视情况来选择吧。  
[![1464579807589][]][1464579807589 1]

### 使用等宽字体 ###

可以方便排版，看起来比较舒服。

### 使用语法高亮 ###

这个要借助一些库来完成，比如highlight.js，具体怎么使用，大家百度吧。

原文链接：[https://www.cnblogs.com/wengxuesong/p/5541924.html][https_www.cnblogs.com_wengxuesong_p_5541924.html]

[Link 1]: http://baike.baidu.com/link?url=OypnDXLBUjI91JQQtqmCCsa1YUz5meWVPIaqWSy9srjVngvaOHRZeqMqCzIKu51XSXv10SiIp34QPMZ3jOGgIK
[1464574926745_4]: https://images2015.cnblogs.com/blog/156514/201605/156514-20160530115517149-1187430233.jpg
[1464574926745_4_1464574926745_4]: /images/20220416/1c96e80bb6184c52bfa7559fde8d034a.png
[1464575037169_4]: https://images2015.cnblogs.com/blog/156514/201605/156514-20160530115518852-1985838088.jpg
[1464575037169_4_1464575037169_4]: /images/20220416/65abf7627fdd4aeabb8461f77f81369e.png
[Link 2]: http://www.w3school.com.cn/html/html_style.asp
[1464577013316_4]: https://images2015.cnblogs.com/blog/156514/201605/156514-20160530115519930-1715939049.jpg
[1464577013316_4_1464577013316_4]: /images/20220416/bf466f3c1c704723b2b1537b66e9c481.png
[1464577279186_4]: https://images2015.cnblogs.com/blog/156514/201605/156514-20160530115520930-1412680994.jpg
[1464577279186_4_1464577279186_4]: /images/20220416/61fdc04e58904b62950e6d9136bfa39f.png
[Link 3]: http://www.w3school.com.cn/html/html_entities.asp
[1464578419416_4]: https://images2015.cnblogs.com/blog/156514/201605/156514-20160530115522227-1775035405.jpg
[1464578419416_4_1464578419416_4]: /images/20220416/9db8b1d1144d415aa70e432ae333be60.png
[1464579144453_4]: https://images2015.cnblogs.com/blog/156514/201605/156514-20160530115523383-567806971.jpg
[1464579144453_4_1464579144453_4]: /images/20220416/6fab3ae472a240dc8f539f7067896ba7.png
[1464579807589]: /images/20220416/539c95caaf6c400b97b4fca9152f94e4.png
[1464579807589 1]: http://images2015.cnblogs.com/blog/156514/201605/156514-20160530115523946-190357558.jpg
[https_www.cnblogs.com_wengxuesong_p_5541924.html]: https://www.cnblogs.com/wengxuesong/p/5541924.html