<pre>：文字保留格式化顯示

阿新 • • 發佈：2018-11-19

我們經常會在要保持文字格式的時候使用pre標籤，比如當我們要展示原始碼的時候，只要放一個pre標籤，然後把原始碼直接複製，貼上，然後在頁面上就可以保持好格式。不會像放在其它標籤裡那樣，把換行和空格都自動摺疊了。這裡看一下pre是如何工作的呢？

pre標籤

HTML裡的pre元素，可定義預格式化的文字。在pre元素中的文字會保留空格和換行符。文字顯現為等寬字型。
下面我們看一個示例，這裡我使用的是一段css程式碼，你也可以換成其它的。如下：

body{

background:#fff;

font: 12px/24px 1.66;

}

當我們用pre包裹它們時

<pre>body{

background:#fff;

font: 12px/24px 1.66;

}</pre>

會在瀏覽器上直接得到

可以看出上面的tab，空格，換行都完整的保留下來了。
我們可以把這段css程式碼放到其它元素下，如得到下面的圖。

很完美，以後就可以用pre來標識程式碼了。哪裡想用放哪裡，但這裡還有一些可以優化。

語義化

pre元素並不能程式碼放入，裡面的內容是什麼，可以是歌詞，可以是程式碼，可以是其它文字。當pre元素來展示原始碼的時候最好的方式是用code元素來包裹程式碼，這樣既可以保持格式又可以代表語義，一舉數得。如上面的程式碼可以改寫為：

<pre>

<code>body{

background:#fff;

font: 12px/24px 1.66;

}</code>

</pre>

巢狀html其它標籤

pre中最好不要包含可以導致段落斷開的標籤（如:p,標題），雖然主流瀏覽器對此解析沒有問題，但最好不要這樣使用。存在著語義不明的情況，比如無法判斷是想顯示結構的不同展示，還是想把標籤作為程式碼的一部分顯示，最好對這裡只包含程式碼文字，對於標籤進行轉義如'>'對應'>'。
pre元素中允許的文字可以包括物理樣式和基於內容的樣式變化，還有連結、影象和水平分隔線。當把其它標籤放到pre塊中時，會被直接渲染為正常元素。
示例如下：

<pre>[ti:凡人歌]

[ar:李宗盛]

[al:凡人歌]

[00:00](music)

[00:28]你我皆凡人，生在人世間；

[00:35]終日奔波苦，一刻不得閒；

[00:43]既然不是仙，難免有雜念；

[00:50]<a href="#">道義放兩旁</a>，利字擺中間。</pre>

顯示出來樣式如下：

問題

文字過長時，溢位

如果我們在pre裡放置的文字過長，中間也沒有換行，由於pre會保持文字的格式，導致文字溢位。
演示如下：

<div style="width:500px; background:red; padding:20px;">

<pre>[ti:凡人歌][ar:李宗盛][al:凡人歌][00:00](music)[00:28]你我皆凡人，生在人世間；[00:35]終日奔波苦，一刻不得閒；[00:43]既然不是仙，難免有雜念；[00:50]<a href="#">道義放兩旁</a>，利字擺中間。</pre>

</div>

瀏覽器中的表現

解決方法1：給pre標籤定義橫向滾動條

pre{

overflow:auto;

}

解決方法2：使用text-wrapping
直接定義pre標籤裡的css屬性white-space的值為pre-wrap。

pre{

white-space:pre-wrap;

}

渲染html元素

上面已經提到過，html元素會在pre標籤中直接被解析。如果我們想顯示這些標籤，只要把這些特殊符號轉換為符號實體，就可以了。如： "<" 代表 "<"，">" 代表 ">"。

<pre><code><ul class="main-list">

<li><a href="#">藏新線才是最西藏的進、出線</a></li>

</ul></code></pre>

也可以使用一些線上的工具去完成這個轉義的過程，這裡可以百度一下，隨便找了一個截了個圖

意外的空格

有時候我們把程式碼直接複製到頁面時，編輯器會給我們自動縮排對齊，這裡其實是很好的，但這裡遇到pre標籤就有麻煩了，比如:

<div>

<pre><code><ul class="main-list">

<li><a href="#">藏新線才是最西藏的進、出線</a></li>

</ul></code></pre>

</div>

結果效果如下：

建議使用下面的形式來對程式碼進行排版。

<div>

<pre><code>第一行

//中間程式碼進行格式化

最後一行</code></pre>

</div>

擴充套件

定義一下tab的大小

pre{

tab-size:2;

}

但這個IE瀏覽器支援情況不太好。視情況來選擇吧。

使用等寬字型

可以方便排版，看起來比較舒服。

使用語法高亮

這個要藉助一些庫來完成，比如highlight.js，具體怎麼使用，大家百度吧。

原文連結：https://www.cnblogs.com/wengxuesong/p/5541924.html

<pre>：文字保留格式化顯示

pre標籤