Question

我们有一个.NET应用程序在axml中保存消息。我们需要做的是将其转换为html。我发现第三方lib“HtmlFromXamlConverter”就是这样做的，有一个小缺陷：如果axml包含多个换行符，它将被转换为类似的东西：

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

仅显示为1换行符。我不能插入“”作为值，因为有下划线样式。所以问题是，有没有办法配置空P标签<p></p>显示为换行符？

Answer 1

如何添加如此微小的内联块：

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

这将强制甚至空段落为您设置的行高。

Answer 2

据我所知，你不能只使用CSS，你必须在段落中添加一个不可破坏的空间：

<p>&nbsp;</p>

Answer 3

HTML代码非常奇怪且破碎，但我认为你无法修复它。使用CSS生成空行p产生空行的方法，通常的CSS警告，是将其高度设置为与行高度相同，并将其边距设置为零（删除默认的顶部和底部边距，否则会出现在此渲染中：

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

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

* { line-height: 1.3; }

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

如果页面上还有其他p个元素，则需要增加一些复杂性来限制规则对所需集合的影响。（没有办法根据CSS中的内容选择元素;但可以使用JavaScript。）

Answer 4

如果您不需要下划线并且仍想添加空格，则可以使用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;
}

Answer 5

您始终可以使用javascript替换空的＆lt; p>标签与＆lt; br＆gt;。以下解决方案使用jQuery：

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

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

Answer 6

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

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

Answer 7

我们已经提到了一些聪明的解决方案，但我喜欢使用仅使用CSS 的解决方案是在p代码上设置最小高度。

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

即使空的p标签占用与其邻居相同的高度，也不需要插入文本。

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

对于缺点，它确实需要你有一些包装元素。我也希望我可以使用相对的线高，但是没有办法让它发挥作用。

Answer 8

一切都更加简单：

  p:empty {
      display: none;
    }

HTML：空<p> </p>标记显示没有换行符

8 个答案: