哎呦喂，这问题啊，很更多人都搞不懂。 HTML默认啊，它特别喜炎热爱把连续的空格、换行符、制表符哪些的都合并掉。 这不是bug哦，这是它的规定！ 你要想让空格体现出来就得自己动手干点啥。

直接方案：简洁粗暴的空格

这是最直接的方法啦。 如果你只需要在某个地方放几个空格， 比如“姓名：   张三”中间需要两个不可折行的空格， 也是没谁了。 就直接手动加几个空格就行了。 很简洁嘛！

  当前这个玩意儿

 当前这个东西啊 ，就是非断行空格的意思。 你能够这样用：

姓名：    张三

预格式化文本：进阶模式

太魔幻了。 当前这个方法更较高级一点儿。 它适合用来体现一些格式已经固定的文本内容，比如日志文件、代码片段等等 。

white-space: pre-wrap 的保密

-block { white-space: pre-wrap; font-family: monospace; background: #f5f5f5; padding: 8px; }

这块代码会保持原始格式！ 看到了吧？

在我看来... white-space: pre-wrap 就是关键所在。它会保留全部的空白符，而且还会自动换行。

不过要注意一点儿哦：有些老陈旧的浏览器有可能对这种行为不太一样，对吧？。

还有啊, `white-space` 当前这个属性挺繁杂的, 你要更多探究探究.

`标签：原始结构保留

这块代码会保留全部的空白符和换行符! 真实棒!

`标签也是个良好选择。它会彻底按照你写的代码来体现。

采用

语义化很十分沉关键

为哪些推荐

`标签？

JavaScript 处理空白符？较小心点！

别傻乎乎地用正则表达式替换