不换行空格的处理：<p>&nbsp;</p>与<p> </p>

Question

 是一个不换行的空格，表示没有换行符的空格。

如果我使用

<p>&nbsp;</p>

我在两段之间有一个空格(更大的间隔)。如果我使用

<p> </p>

我在两个段落之间只有一条新的线(没有中断)。为什么？

Answer 1

在HTML中，只包含普通空格字符的元素被认为是空的。只包含正常空格字符的段落高度为零。不间断空格是一种特殊的空格字符，它不被认为是无关紧要的，因此它可以用作非空段落的内容。

即使您考虑在段落上使用CSS边距，因为“空”段落的高度为零，所以它的垂直边距将为collapse。这导致它没有高度和边距，使它看起来就像根本不存在一样。

Answer 2

那么解决方法如何呢？在我的例子中，我将文本区域的值放在一个clear变量中，并将所有"<p>&nbsp"更改为<p class="clear">，并将jQuery类更改为具有一定的高度和边距，如下面的示例所示：

jQuery

tinyMCE.triggerSave();
var val = $('textarea').val();
val = val.replace(/<p>&nbsp/g, '<p class="clear">');

然后，将val与新val一起保存到数据库中。

CSS

p.clear{height: 2px; margin-bottom: 3px;}

你可以随心所欲地调整高度和边距。因为'p‘是display: block元素。它应该会给出预期的输出。

希望这能有所帮助！

Answer 3

如果我理解你的问题，这应该是可行的

&emsp- em空间；这应该是一个非常宽的空间，通常多达四个实数空间。&ensp- en空格；这应该是一个稍宽的空格，大致是两个规则的空格。&thinsp-这将是一个狭窄的空间，甚至比常规空间更窄。

资料来源：http://hea-www.harvard.edu/~fine/Tech/html-sentences.html