在網頁流程中，經常會遇到在編輯頁面中，請使用者輸入一段文字，並於之後瀏覽頁面顯示該段文字。
文字輸入框通常會使用 <textarea> tag 讓使用者彈性編輯。但在顯示時，需注意顯示的方式，才能使使用者編輯的內容完整呈現。今天就來認識與上述需求相關的 <pre> tag 吧。
Outline
* 介紹 <pre> tag
* 介紹關鍵 white-space 屬性
* 參考資料➤ 介紹 <pre> tag
<pre> tag 與其他標籤不同，可完整呈現程式碼當中的文本格式，包含換行符號、空格等。
以上述的需求範例為例，使用 <p> tag 與 <pre> tag 的差異如下：
可以發現使用普通的 <p> tag 會濾掉換行及空白符號。而 <pre> tag 則能夠保留使用者編輯的內容文本格式。
而這兩個內容的差別關鍵在於 white-space 屬性。
➤ 介紹關鍵 white-space 屬性
white-space 屬性會決定文本當中的空白字元該如何顯示。有以下選項供設定(參考 MDN 文件)：
normal連續的空白會被合併，換行字元視為空白。只有在文字空間被限制時會換行。
其中「文字空間被限制」，指的是文本的容器大小小於文本長度時，為了不超出容器，就會換行。nowrap基本上同normal，只是強制不換行，也就是可能會超過文本的容器。pre
連續的空白會被保留，只有遇到 <br> 元素或是換行符號時才會換行。pre-wrap基本上同pre，但會受文字空間限制而換行。pre-line基本上同pre-wrap，但連續的空白字元會被合併。
接續上一段的範例，用 white-space 屬性重新理解一下。
<p> tag 的 white-space 預設為 normal 。因此所有的換行字元都被視作空白，且連續的空白會被合併，因而無法完整呈現 <textarea> tag 中的文本內容。
而 <pre> tag 的 white-space 預設為 pre 。因此空白、換行都能夠正常顯示，能夠完整呈現 <textarea> tag 中的文本內容。
我們知道其中關鍵了，也就表示，我們可以更改 p <tag> 的 white-space 屬性，使它能夠擁有跟 <pre> tag 一樣的特性。
顯示如下：
可以發現 <p> tag 與 <pre> tag 顯示結果有一點差異。這是因為 <pre> tag 還有一項特色是它預設為等寬字體 (monospace)。若將兩 tag 設定為同一字體，則視覺上就無差異了。
使用 <pre> tag 時需小心它的 white-space 預設為 pre ，表示不受文字空間限制，也就是會發生視覺上爆版的情況，如下所示。
給定 <pre> tag 寬度為 100px 及灰色背景。可以發現文字以明顯超過容器範圍了。
這時有兩個解決方式：
(1) 滾動顯示
設定 overflow-x: scroll; ，使之保有文本格式，又可以透過滾動瀏覽內容。
(2) 更改white-space 屬性
將 white-space 屬性改為 pre-wrap，使 <pre> tag 因文字空間限制而換行。
以上是今天的小小分享，有任何問題都歡迎留言指教，謝謝 😊
