【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着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进行换行会正确的呈现出来（换行被保留了下来）
同时，当内容过多，超过父层元素空间的情况下，会帮你自动换行，不会超出容器