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

Question

我想要全部为空<p> 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编辑器中显示编辑内容的预览，而编辑器不保留<br>里面<p>当将内容序列化为json时并使其在从 json 渲染预览时看起来有所不同。请参阅: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>