处理非中断空间:<p>&nbsp; </ p>与<p> </ p>

Question

  是一个非中断空格,表示没有换行的空白空间.

如果我使用

<p>&nbsp;</p>

我有两个段落之间的空间(更大的休息时间).如果我使用

<p> </p>

我在这两段之间只有一条新线(没有休息).为什么？

Answer 1

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

即使您考虑段落上的CSS边距,因为"空"段落的高度为零,其垂直边距将会崩溃.这导致它没有高度和没有边距,使它看起来好像从来没有.

Answer 2

解决方法怎么样？在我的例子中,我在一个jQuery变量中取得了textarea的值,并将所有更改"<p>&nbsp"为<p class="clear">清除类以具有一定的高度和边距,如下例所示:

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元素.它应该给你预期的输出.

希望有所帮助!