在html中，如果你的字符串是寫在某個(gè)標(biāo)簽里面的，那么不管是真正的回車換行還是你用轉(zhuǎn)義 \n換行，你都得不到你想要的結(jié)果：

<p>
  abc\n
  `def\n`
  "ghi\n"
  fd
</p>

這段標(biāo)簽最后會(huì)顯示成這樣：

normal.png

也就是說，真正的回車換行會(huì)變成空格，你想象中的轉(zhuǎn)義會(huì)被原封不動(dòng)的顯示出來。為了解決這個(gè)問題，你需要CSS中的一個(gè)屬性 — white-space。

這個(gè)屬性被用來”告訴“html如何處理”空白“元素，但是這里的空白并不是你想象中的空格。這里的”空白“指的是用于顯示正常字符之間的水平或者垂直的空格。所以你會(huì)發(fā)現(xiàn)在html中多個(gè)空格最后會(huì)被顯示成一個(gè)空白，回車也會(huì)被顯示成一個(gè)空白。

這個(gè)時(shí)候可以將white-space設(shè)置成：

• pre-wrap — 連續(xù)的空白符會(huì)被保留。在遇到換行符或者<br>元素，或者需要為了填充line盒子時(shí)才會(huì)換行。
• pre-line — 連續(xù)的空白符會(huì)被合并。在遇到換行符或者<br>元素，或者需要為了填充line盒子時(shí)會(huì)換行。

<p style="white-space: pre-wrap;">
  ab    c\n
  `def\n`
  "ghi\n"
  
  fddf
</p>

<p style="white-space: pre-line;">
  ab    c\n
  `def\n`
  "ghi\n"
  
  fddf
</p>

上面的兩段代碼會(huì)被分別渲染成：

pre-warp.png

pre-line.png