4

我们有一个在 axml 中保存消息的 .NET 应用程序。我们需要做的是将其转换为 html。我发现第 3 方库“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>为换行符？

4

8 回答 8

19

How about adding a tiny inline block like so:

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

This will force even empty paragraphs to be of the line-height you've set.

于 2013-08-15T09:20:51.747 回答
13

据我所知，你不能只用 CSS 来做到这一点，你必须在段落内添加一个不可破坏的空间：

<p>&nbsp;</p>
于 2012-09-11T21:53:13.463 回答
11

This solution gives empty paragraphs the current lineheight:

p:empty:before {
  content: ' ';
  white-space: pre;
}
于 2018-11-07T16:24:15.573 回答
3

There are clever solutions already mentioned, but one solution I like that uses only CSS is to set a minimum height on your p tags.

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

This will make even empty p tags take up the same height as their neighbors, and you don't need to mess around with inserting text.

This is really good if you're displaying user input, because you might want to save that user input again and you'd need to carefully rip out all of the &nbsp;s or whatever else you inserted.

For downsides, It does require that you have some wrapping element. I also wish I could use relative line-heights but don't see a way to make that work.

于 2017-02-05T16:52:12.453 回答
2

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

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

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

* { line-height: 1.3; }

The value should be chosen according to the properties of the font; but 1.3 is reasonable for a typical situation.

If there are other p elements on the page, you need some added complexity to restrict the effect of the rule to the desired set only. (There is no way to select elements on the basis of its content in CSS; but JavaScript could be used for that.)

于 2012-09-12T05:17:09.850 回答
1

如果您不需要下划线并且仍想添加空格，您可以在 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;
}
于 2012-09-11T22:05:56.217 回答
1

您始终可以使用 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 />');
于 2012-09-11T23:06:59.710 回答
0

everything is much simpler:

  p:empty {
      display: none;
    }

于 2020-07-02T14:54:41.530 回答