saber酱的抱枕

Fly me to the moon

07/23
18:36
学习

wordpress编辑器换行行距不一致的原因

wordpress的编辑器在换行方面是有诡异的情况的,即可视化里的换行和代码模式的换行所产生的行距是不同的。这一度使我摸不着头脑。

如果我们全部使用可视化编辑的换行,效果是这样的:

如果全部使用代码模式的换行来写文章,效果是这样的:

行距的差别是明显的,可视化的间距之大都快变成段落了,无非是没有首行缩进而已。那么原因何在呢?

我们在可视化里面按下enter,转到代码模式里面去看,会发现是这样的

从代码里看,可视化的换行其实是一个空行+一个nbsp;(这个空格算文字,占位用的),它俩各占一行,所以这一个enter算是产生了两行

如果你换行之后输入了文字,这个nbsp;就换成了你输入的文字。

那么现在就变成了一个空行+你的文字,其实和上面没区别的,它的行距也还是那么大。

最后到代码模式下,我们按下enter,得到的是我们习惯了的的效果:

问题已经看出来了,可视化的换行比代码模式下的换行多了一个空行,因此导致可视化的行间距比代码模式下的行间距大。

另外,可视化模式的产生的空行可以去代码里面删掉,就变得和代码里面的换行一样了。

明白了这两个模式里行间距不同的原因,我们就不会为行间距不统一而烦恼了。

另外还有些发现:

1.在代码模式里面按了enter就换行了,在可视化里面也生效,但是我们并没有看到
标签,可能是wp把
标签隐藏了。手动输入
的话,需要标签后紧跟有文字,不然
标签是会被删除的。这也就是可视化模式的换行产生的nbsp;的作用了。如果跟了文字,确实会有换行效果,但是
标签还是会被隐藏。

2.关于这个nbsp;空格,我们在可视化里面敲下enter后,是无法选中这个空格的,此时我们要删除这个空行,按一次backspace键就行了。到代码模式里面看一下再回来,这个空格就可以被选中了,此时我们就需要两次backspace才能删除这个“空行”了,因为空格需要删一次。

wordpress编辑器换行行距不一致的原因