在html中，如果你的字符串是写在某个标签里面的，那么不管是真正的回车换行还是你用转义 \n换行，你都得不到你想要的结果：
<p>
abc\n
`def\n`
"ghi\n"
fd
</p>
这段标签最后会显示成这样：
normal.png
也就是说，真正的回车换行会变成空格，你想象中的转义会被原封不动的显示出来。为了解决这个问题，你需要CSS中的一个属性 — white-space。
这个属性被用来”告诉“html如何处理”空白“元素，但是这里的空白并不是你想象中的空格。这里的”空白“指的是用于显示正常字符之间的水平或者垂直的空格。所以你会发现在html中多个空格最后会被显示成一个空白，回车也会被显示成一个空白。
这个时候可以将white-space设置成：
-
pre-wrap — 连续的空白符会被保留。在遇到换行符或者
<br>元素，或者需要为了填充line盒子时才会换行。 -
pre-line — 连续的空白符会被合并。在遇到换行符或者
<br>元素，或者需要为了填充line盒子时会换行。
<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>
上面的两段代码会被分别渲染成：
pre-warp.png
pre-line.png
