【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

有空白壓縮？

之前的【HTML】【CSS】如何處理inline-block 元素之間的空白文章中有提到
HTML元素之間的空白、換行及 Tab 字元將佔用一格空間，也就是一格空白字元

然而，在撰寫HTML的時候，會發現一件神奇的事情，無論使用了多少空白，換了多少行，最終都只會被當作一個
範例：https://codepen.io/linchinhsuan/pen/jOaJzMV

而這種「當瀏覽器遇到兩個或以上的空白字元時，只會顯示一個」，即便遇到斷行也會當作一個空白，這種現象稱為空白壓縮

為何會有空白壓縮

空白壓縮是由CSS的white-space屬性控制的，因為預設情況下white-space的值為normal
當white-space的值為normal時，當出現一個以上的空白字元時，會被合併成一個
因此，無論我們按了再多下空白鍵，或是換了多少行，永遠都是一個空白

如果想保留空白的解法

由於空白壓縮是由CSS的white-space屬性引起的，自然可以透過調整white-space屬性值來解決
將white-space的值改成pre就可以保留空白

p{
  white-space: pre
}

pre、pre-wrap、pre-line三者差異

white-space設定成pre、pre-wrap、pre-line時，雖然三者都會「適當保留空白」，但會有些許的差異
也就是保留的程度不同
範例：https://codepen.io/linchinhsuan/pen/BambrJK

在值為pre的情況下，多個空白會被保留，如果程式碼中按了enter進行換行也會正確的呈現出來
但當內容過多，超過父層元素空間的情況下，會直接超出去，因此出現了水平向的捲軸

在值為pre-wrap的情況下，多個空白會被保留，如果程式碼中按了enter進行換行也會正確的呈現出來
但當內容過多，超過父層元素空間的情況下，會幫你自動換行，不會超出容器

在值為pre-line的情況下，多個空白會被合併成一個，但是如果程式碼中按了enter進行換行會正確的呈現出來（換行被保留了下來）
同時，當內容過多，超過父層元素空間的情況下，會幫你自動換行，不會超出容器