什麼是預格式化文本?

這裡如何在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編輯