如何使用 css 实现与在目标元素内具有 <br> 相同的效果？

Question

我希望html中所有空的<p>元素里面都有一个换行符，并使用css来实现这个效果。

详情：

下面的两个p 标记应该具有相同的外观（跨浏览器和缩放级别）

p标签的所有其他风俗风格都是一样的

p:empty {
  /** How can I code here (or some other way css codes can achieve this) **/
}

<p><br></p>
<p></p>

背景：我想在prosemirror编辑器中显示编辑内容的预览，而当将内容序列化为json时，编辑器不会在<p>中保留<br>，并使其在从@呈现预览时看起来不同987654330@。见：discuss.prosemirror

Answer 1

有几种方法可以做到这一点，以下是您可以使用自己代码背后的相同逻辑的方法，只需在内容后添加空格 Unicode：

p:empty:after {
  content: '\00a0';
}

p {
  outline: 1px solid red;
}

<p><br></p>
<p></p>

演示：

console.log(document.getElementById("first").offsetHeight)
console.log(document.getElementById("second").offsetHeight)

p:empty:after {
  content: '\00a0';
}
p {
  outline: 1px solid red;
}

<p id="first"><br></p>
<p id="second"></p>

Answer 2

一个空的 inline-block 元素也可以完成这项工作：

p:empty:after {
  content: '';
  display:inline-block;
}

p {
  outline:1px solid red;
}

<p><br></p>
<p></p>

<div style="font-size:30px">
<p><br></p>
<p></p>
</div>

或者像下面这样：

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

p {
  outline:1px solid red;
}

<p><br></p>
<p></p>

<div style="font-size:30px">
<p><br></p>
<p></p>
</div>

Answer 3

您可以像这样为<p> 提供明确的height 和line-height：

p {
  height: 1em;
  line-height: 1em;
}

工作示例：

table, tr, th, td {
  border: 1px solid rgb(191, 191, 191);
}

p {
  height: 1em;
  line-height: 1em;
  text-align: center;
  border: 1px solid red;
}

<table>
  <thead>
  <th>Column 1</th>
  <th>Column 2</th>
  </thead>

  <tr>
    <td>
      <p></p>
      <p>Two</p>
      <p></p>
      <p>Four</p>
    </td>
    
    <td>
      <p><br></p>
      <p>Two</p>
      <p><br></p>
      <p>Four</p>
    </td>
  </tr>
</table>