CSS 解决 HTML 大段文本没有换行问题

问题

有一大段说明文字，已经分段落和换行好了，但是页面上去没有换行，而且空格也被去掉了。

解决方法

使用white-space的pre-wrap样式。

white-space: pre-wrap

white-space

pre-line

只允许换行，但是多个空格会只保留一个空格。

pre-wrap

允许换行，且保留多个空格。所见即所得。

<p>
    你好，世界！

    你好，               CSS！




    你好，JS
    哈哈哈
</p>
<div style="width:100%;height:20px;background-color: red"></div>
<p style="white-space: pre-line">
    你好，世界！

    你好，               CSS！




    你好，JS
        哈哈哈
</p>
<div style="width:100%;height:20px;background-color: red"></div>
<p style="white-space: pre-wrap">
    你好，世界！

    你好，               CSS！




    你好，JS
        哈哈哈
</p>
<div style="width:100%;height:20px;background-color: red"></div>
<p style="white-space: nowrap">
    你好，世界！

    你好，               CSS！




    你好，JS
        哈哈哈
</p>