<pre>:文字保留格式化顯示
我們經常會在要保持文字格式的時候使用pre標籤,比如當我們要展示原始碼的時候,只要放一個pre標籤,然後把原始碼直接複製,貼上,然後在頁面上就可以保持好格式。不會像放在其它標籤裡那樣,把換行和空格都自動摺疊了。這裡看一下pre是如何工作的呢?
pre標籤
HTML裡的pre元素,可定義預格式化的文字。在pre元素中的文字會保留空格和換行符。文字顯現為等寬字型。
下面我們看一個示例,這裡我使用的是一段css程式碼,你也可以換成其它的。如下:
1 2 3 4 |
|
當我們用pre包裹它們時
1 2 3 4 |
|
會在瀏覽器上直接得到
可以看出上面的tab,空格,換行都完整的保留下來了。
我們可以把這段css程式碼放到其它元素下,如得到下面的圖。
很完美,以後就可以用pre來標識程式碼了。哪裡想用放哪裡,但這裡還有一些可以優化。
語義化
pre元素並不能程式碼放入,裡面的內容是什麼,可以是歌詞,可以是程式碼,可以是其它文字。當pre元素來展示原始碼的時候最好的方式是用code元素來包裹程式碼,這樣既可以保持格式又可以代表語義,一舉數得。如上面的程式碼可以改寫為:
1 2 3 4 5 6 |
font: 12px/24px 1.66;
|
巢狀html其它標籤
pre中最好不要包含可以導致段落斷開的標籤(如:p,標題),雖然主流瀏覽器對此解析沒有問題,但最好不要這樣使用。存在著語義不明的情況,比如無法判斷是想顯示結構的不同展示,還是想把標籤作為程式碼的一部分顯示,最好對這裡只包含程式碼文字,對於標籤進行轉義如'>'對應'>'。
pre元素中允許的文字可以包括物理樣式和基於內容的樣式變化,還有連結、影象和水平分隔線。當把其它標籤放到pre塊中時,會被直接渲染為正常元素。
示例如下:
1 2 3 4 5 6 7 8 |
|
問題
文字過長時,溢位
如果我們在pre裡放置的文字過長,中間也沒有換行,由於pre會保持文字的格式,導致文字溢位。
演示如下:
1 2 3 |
|
1 2 3 |
|
解決方法2:使用text-wrapping
直接定義pre標籤裡的css屬性white-space的值為pre-wrap。
1 2 3 |
|
渲染html元素
上面已經提到過,html元素會在pre標籤中直接被解析。如果我們想顯示這些標籤,只要把這些特殊符號轉換為符號實體,就可以了。如: "<" 代表 "<",">" 代表 ">"。
1 2 3 4 5 |
|
也可以使用一些線上的工具去完成這個轉義的過程,這裡可以百度一下,隨便找了一個截了個圖
意外的空格
有時候我們把程式碼直接複製到頁面時,編輯器會給我們自動縮排對齊,這裡其實是很好的,但這裡遇到pre標籤就有麻煩了,比如:
1 2 3 4 5 6 7 |
|
建議使用下面的形式來對程式碼進行排版。
1 2 3 4 5 |
|
擴充套件
定義一下tab的大小
1 2 3 |
|
使用等寬字型
可以方便排版,看起來比較舒服。
使用語法高亮
這個要藉助一些庫來完成,比如highlight.js,具體怎麼使用,大家百度吧。