HTML：空的<p></p>标签不显示换行

Question

我们有一个.NET应用程序，将消息保存在axml中。我们需要做的是将其转换为html。我已经找到了一个第三方库“HtmlFromXamlConverter”可以实现这一点，但它存在一个小缺陷：如果axml包含多个换行符，它将被转换为类似以下内容的形式：

<P ><SPAN STYLE="text-decoration:underline;" /> </P>
<P ><SPAN STYLE="text-decoration:underline;" /> </P>
<P ><SPAN STYLE="text-decoration:underline;" /> </P>

只有一个换行符的情况下，我无法插入" "作为值，因为有下划线样式。所以问题是，是否有一种方法可以将空的P标签<p></p>配置为显示为换行符？

是否有一种方法可以使空的P标签<p></p>显示为换行符？因为在某些情况下，无法像其他情况那样使用" "来创建空格。 解决方案是可以通过CSS进行配置。

- Xi 张熹

---

需要使用下划线风格吗？ - thismat

Answer 1

加入一个像这样的微小内联块怎么样：

p:after {
  content:"";
  display:inline-block;
  width:0px;
  outline:1px solid red; /* debug, remove me */
}

这将强制即使是空段落也具有您设置的行高。

- Mark

Answer 2

该解决方案会将空段落的行高设置为当前行高：

p:empty:before {
  content: ' ';
  white-space: pre;
}

- w00t

Answer 3

据我所知，您无法仅使用CSS实现该功能，必须在段落中添加一个不间断空格：

<p>&nbsp;</p>

- bfavaretto

---

我试过了。太糟糕了，它会显示为空格和下划线。 :( 我不能删除下划线，因为在其他情况下它是有用的。 - Xi 张熹

不适合用于链接，因为它只会显示短下划线。 - t0m

你可以用换行符替换空标签，例如：string.Replace("<b></b>", "<br />")。 - Brent

Answer 4

已经提出了许多聪明的解决方案，但我喜欢使用CSS的一种解决方案，即在p标签上设置最小高度。

.myText {
  font-size: 14px;
  line-height: 18px;
}
.myText p {
  min-height: 18px;
}

这将使即使是空的p标签也与其邻居占据相同的高度，您无需费心插入文本。

如果您正在显示用户输入，这真的很好，因为您可能希望再次保存该用户输入，并且需要仔细删除所有 或其他插入的内容。

缺点是，它确实要求您具有一些包装元素。我也希望能使用相对行高，但不知道如何使其起作用。

- SimplGy

Answer 5

HTML代码非常奇怪和破碎，但我想您不能修复它。使用CSS使空的p产生一个空行的方法是将其高度设置为与行高相同，并将其边距设置为零（删除在此呈现中否则会出现的默认顶部和底部边距）：

p { height: 1.3em; margin: 0; }

这要求行高为1.3，最好明确设置（而不是让浏览器默认）：

* { line-height: 1.3; }

根据字体的属性选择合适的值；但对于典型情况，1.3是合理的。

如果页面上有其他p元素，则需要添加一些复杂性以仅限制规则的影响范围。 （在CSS中无法基于内容选择元素; 但可以使用JavaScript实现。）

- Jukka K. Korpela

Answer 6

如果您不需要下划线，但仍想添加空格，您可以使用CSS中的!important标签覆盖内联样式。

p span {
   text-decoration: none !important; 
   /* This will force the underline to go away if you want to add spaces */
}

如果您只想在每个段落标签的底部添加一些边距，可以这样做：

p { 
   display: block;
   margin-bottom: <value>px;
}

请记住，这将影响页面上的所有段落，为它们应用一个类将是仅调整这些换行标签的最佳解决方案。然后您可以执行以下操作：

.linebreak {
   display: block;
   margin-bottom: <value>px;
}

- thismat

Answer 7

您可以始终使用JavaScript将空的<p>标签替换为<br>。以下解决方案使用jQuery：

var emptyPs = $('P > SPAN[STYLE="text-decoration:underline;"]').filter(function() {
    var $this = $(this);
    return $.trim($this.text()).length == 0;});

emptyPs.replaceWith('<br />');

- zykorex

Answer 8

一切都变得更简单了：

  p:empty {
      display: none;
    }

- Irbis