HTML：空<；p></p>；标记不显示换行符

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

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

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

---

仅显示为一个换行符。无法插入“”作为值，因为存在下划线样式。所以问题是，有没有一种方法可以配置显示为换行符的空P标记？

据我所知，仅使用CSS无法实现这一点，您必须在段落内添加不可拆分的空格：

<p>&nbsp;</p>

如果您不需要下划线，但仍希望添加空格，则可以使用！CSS中的重要标记

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;
}

p{
显示：块；
边缘底部：px；
}

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

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

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

.linebreak{
显示：块；
边缘底部：px；
}

您始终可以使用javascript将空的标记替换为
。以下解决方案使用jQuery：

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

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

var-emptyPs=$（'P>SPAN[STYLE=“text-decoration:underline；”“]）。过滤器（函数（）{
var$this=$（this）；
返回$.trim（$this.text（））.length==0；}）；
emptyPs.replacetwith（“
”）；

HTML代码非常奇怪且不完整，但我认为您无法修复它。使用CSS使空的

p

生成空行的方法，以及通常的CSS警告，是将其高度设置为与行高度相同，并将其边距设置为零（否则将删除此渲染中显示的默认顶部和底部边距）：

这假设行高度为1.3，最好显式设置（而不是让浏览器默认设置）：

应根据字体的属性选择值；但1.3对于典型情况来说是合理的

---

如果页面上有其他

p

元素，则需要增加一些复杂性，以将规则的效果仅限制在所需的集合。（没有办法根据CSS中的内容来选择元素；但JavaScript可以用于此。）

添加一个小的内联块怎么样：

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

---

这将迫使空段落达到您设置的行高。

已经提到了一些聪明的解决方案，但我喜欢的一个解决方案是只使用CSS，即在

p

标记上设置最小高度

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

这将使得即使是空的

p

标记也与它们的相邻标记占据相同的高度，并且您不需要乱插入文本

如果您正在显示用户输入，这非常好，因为您可能希望再次保存该用户输入，并且需要小心地删除所有插入的

或其他内容

---

对于缺点，它确实需要一些包装元素。我也希望我可以使用相对行高，但我看不到一种方法来实现这一点。

此解决方案为空段落提供了当前行高：

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

---

一切都简单得多：

p：空{
显示：无；
}

它需要下划线样式吗？我试过了。太糟糕了，它将显示为带下划线的空白：（我无法删除下划线，因为在其他情况下它很有用。例如，对于链接来说，它不太好。它将显示短下划线。您可以用换行符替换空标记，例如string.replace（“，”
”）