1、空格规则

HTML 代码的空格通常会被浏览器忽略。
 

<p>  hello  world  </p>

<pre>  hello  world  </pre>
另一种方法是，改用 HTML 实体 表示空格。
<p>  hello  world  </p>

<p>hello
world</p>

<p>hello<br>world</p>

上面代码使用

标签显式表示换行

3、CSS white-space 属性

HTML 语言的空格处理，基本上就是直接过滤。这样的处理过于粗糙，完全忽视了原始文本内部的空格可能是有意义的。

CSS 提供了一个white-space属性，可以提供更精确一点的空格处理方式。该属性共有六个值，除了一个通用的inherit（继承父元素），下面依次介绍剩下的五个值。

3.1 white-space: normal

white-space属性的默认值为normal，表示浏览器以正常方式处理空格。
 

html:
    <p>  hellohellohello hello
    world
    </p>
style:
    p {
        width: 100px;
        background: red;
    }

p {
    white-space: nowrap;
}

所有文本显示为一行，不会换行。

3.3 white-space: pre

white-space属性为pre时，就按照 <pre> 标签的方式处理。
 

p {
    white-space: pre;
}

p {
    white-space: pre-wrap;
}

p {
    white-space: pre-line;
}