非中断空间的处理：<p> </p> vs. <p> </p>

Posted 2023-02-16

【中文标题】非中断空间的处理：<p> </p> vs. <p> </p>

【英文标题】：Handling of non breaking space: <p>&nbsp;</p> vs. <p> </p>

【发布时间】：2012-08-30 01:33:44

【问题描述】：

 是一个非换行空格，表示没有换行的空白空间。

如果我使用

<p>&nbsp;</p>

我在两个段落之间有一个空格（更大的休息）。如果我使用

<p> </p>

我在两段之间只有一个新行（没有中断）。为什么？

【问题讨论】：

部分问题是您想在段落之间创建一个空的段落元素，而在它们之间获得间距的正确方法是使用 CSS。

或<br />，但由于代码是从 WYSISWG 编辑器生成的，因此我对它没有太大影响。

【参考方案1】：

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

&emsp——em 空间；这应该是一个非常宽的空间，通常多达四个真实空间。 &ensp——en 空间；这应该是一个有点宽的空间，大约是两个常规空间。 &thinsp——这将是一个狭窄的空间，甚至比普通空间还要狭窄。

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

【参考方案2】：

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

即使您考虑段落的 CSS 边距，由于“空”段落的高度为零，它的垂直边距将 collapse。这导致它没有高度和边距，使它看起来好像根本不存在。

【讨论】：

空表示这个元素不会被表示？

它会被表示，但不会占用空间，因为它的高度为0。

@Nik-Lz 它仍然存在于 DOM 中，这就是我认为“代表”的意思。

【参考方案3】：

如何解决？ 在我的情况下，我在 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.clearheight: 2px; margin-bottom: 3px;

您可以根据需要调整高度和边距。 因为 'p' 是一个 display: block 元素。它应该会给你预期的输出。

希望有帮助！