如何使用CSS实现与在目标元素中包含<br>相同的效果？

DJY 发表于 Dev

我希望<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。请参阅：describe.prosemirror

伊斯兰教Elshobokshy

您可以通过多种方式执行此操作，这是在代码内容后面添加一个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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-01-24

0 条评论

登录后参与评论