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

Question

我希望 html 中的所有空  元素在其中有一个换行符，并使用 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 并制作时，编辑器不会在  中保留  从 json 渲染预览时看起来不一样。参见：discuss.prosemirror

Answer 1

您可以像这样给  一个明确的 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>

Answer 2

有几种方法可以做到这一点，这里是您如何通过在内容后添加 space Unicode 来使用您自己的代码背后的相同逻辑：

p:empty:after {
  content: '[=10=]a0';
}

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: '[=13=]a0';
}
p {
  outline: 1px solid red;
}

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

Answer 3

一个空的行内块元素也可以完成这项工作：

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>

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

How to use css to implement same effect as having a <br> inside target element?

html

css

line-breaks