通常 html 中的空格，換行等，再展示實際介面時會被忽略，這時大家通常會用轉義。如：空格變成 &nbsp; 、換行變成 <br> 等。

接下來給大家介紹另一種簡單的方法：

pre

通過 <pre> 標籤 或者通過 css中的 white-space: pre 可以原封不動的顯示所有的空格符號和換行符。

<pre>你        
        - 好</pre>

效果：

<div style="white-space: pre;">你        
        - 好</div>

效果：

可以看到：pre標籤自帶了很多其他樣式，如margin，font-family等，注意清除！

注意：white-space: pre 顧名思義就是像 pre 標籤那樣顯示空白字元

優先採用 pre 標籤

儘管pre標籤自帶了很多樣式可能不是我們想要的，但我還是推薦優先使用pre標籤。
考慮一下程式碼的 lint（format code） 和 打包，你就明白了。

經過測試，只有採用pre標籤才能保證以上兩個場景，空格類字元不會被處理。

自動換行問題

當一行字串過長時，你會發現頁面顯示不會自動換行，這可能會有一個糟糕的橫向滾動條。

<div class="wrapper">
    <pre>你          +           - 好 我   愛  中國 , 我是 long 的 傳 人 - ----------------------------    ---- - - -- - ------- </
 
pre>
</div>
<style>
    .wrapper {
        width: 400px;
        margin: 30px auto;
        border: 1px solid #ddd;
        overflow: auto;
    }
</style>

效果：

沒關係，我們可以 加上（或改用）樣式： white-space: pre-wrap; （wrap表示自動換行）

關於white-space，還有其他值：
normal（預設）：忽略空白類字元，自動換行；
nowrap：忽略空白類字元，不自動換行；
pre-line：僅保留換行符，會忽略空格等，會自動換行；

<div class="wrapper">
    <pre style="white-space: pre-wrap;">你          +           - 好 我   愛  中國 , 我是 long 的 傳 人 - ----------------------------    ---- - - -- - ------- </pre>
</div>
<style>
    .wrapper {
        width: 400px;
        margin: 30px auto;
        border: 1px solid #ddd;
        overflow: auto;
    }
</style>

效果：

也許你已經發現了，部落格園展示程式碼採用的就是pre標籤，而且pre的white-space 被修改成了 pre-wrap。