这是我参与「第四届青训营」笔记创作活动的的第1天

结束了字节青训营的今天的课程，记录了两项较有意思的笔记，空白处理与grid布局

正好之前也遇到了空白处理的问题，本篇就先分享下这部分的内容

默认的处理行为

一般，浏览器会将 HTML 中的多个空格或换行合并成一个空格

<span>111    1     111</span>

这在页面上会渲染成：111 1 111

修改默认行为

CSS

如果不想空格被合并，可以通过 CSS 的 white-space 属性来设置，该属性默认为 normal，表示合并空白字符

<span style="white-space: pre">111   1   111</span>

可以将其设置为 pre 空白字符就会被保留 111 1 111

同时换行符也会保留

<span style="white-space: pre">
  111
  1
  111
</span>

在页面中是这样的

111
1
111

white-space 还有其他属性值，功能大同小异：

normal：连续的空白符会被合并，换行符会被当作空白符来处理。
nowrap：和 normal 一样，但文本不会换行(在块级元素中生效)
pre：空白符和换行都会被保留。
pre-wrap：和 pre 一样。
pre-line：合并空白，但保留换行。

吐槽一下，就没一种保留空白但移出换行的属性……

转义字符

在我知道这个属性之前，我是用转移字符   来处理的

包括在编写这篇文章时，因为掘金会自动合并空格，只有也得用 111  1  111 才能展示出111 1 111的效果

遇到的问题

然后，我在课上提了一个问题，如何移除标签外的空格

因为我在写代码时，编译器自动格式化的时候经常换行

<span>111</span>
<span>222</span>

渲染出来就是：111 222

我希望把中间这个空格去掉，但好像 css 没办法做到

我又挺享受编译器的自动格式化的，所以就尝试采取 JS 的方式了

解决办法

JS移出空白

我用 node 写了一个脚本，将标签中的所有空白字符移除了

逻辑很简单，调用 fs 的方法，中间用正则过滤一下就好了

const fs = require('fs')

fs.readFile(
  'src.html',
  {
    encoding: 'utf-8',
  },
  (err, res) => {
    res = res.replace(/>\s*</g, '><')
    fs.writeFile('index.html', res, () => {})
  }
)

实时更新

写这种小 demo 肯定时希望实时自动更新页面，平时我用的是 Live Server 插件，前端程序员一定不陌生

而用来监视 js 执行，我使用的是 nodemon

全局安装

npm install -g nodemon

运行

nodemon .\index.js

这样就可以在 index.js 文件改变时重新执行其中的内容了

但是，这不够，因为 index.js 我们平时是不动的，修改都在 src.html 中

nodemon 有个 watch 参数可以实现这一功能

nodemon .\index.js --watch .\src.html

这样我们每次保存 .\src.html，index.js 就会自动执行，将空白字符过滤后的代码写入 index.html

而在 index.html 开启 Live Server 服务器，就能实时看到最新的修改了

结语

如果喜欢或有所帮助的话，希望能点赞关注，鼓励一下作者。

如果文章有不正确或存疑的地方，欢迎评论指出。

HTML中的空白处理 | 青训营笔记