html - 如何将填充保留在 contenteditable div 中，就像保留在 textarea 中一样？

Question

当我padding在textareawith中设置时overflow:scroll，它会保持它padding，即使显示滚动条也是如此。div不会发生同样的情况contenteditable，如下例所示，其中 div 和 textarea 应用了相同的样式：

https://jsfiddle.net/xa7b4f8y/

.contentEditable, .textArea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  width: 300px;
  height: 50px;
  border: solid 1px black;
  overflow: scroll;
  padding: 20px;
  margin-bottom: 20px;
}

<h3>contenteditable:</h3>
<div class="contentEditable" contenteditable spellcheck="false"></div>
<h3>textarea:</h3>
<textarea class="textArea" contenteditable spellcheck="false"></textarea>

如您所见，在 contenteditable div 中，只padding-left保留了 ，而在 textarea 中，它在所有四个边上都保留了 20px 的填充。

如何让 contenteditable 中的填充与在 textarea 中的行为相同？

我在 Firefox 78 上运行它。在 Chrome 84 上，两者的工作方式相同 - 只保留左右填充，这也不是预期的结果。

标签： htmlcsstextareapaddingcontenteditable

Answer 1

可能不是最好的解决方案，但您可以使用伪元素破解它，您可以在白色背景的填充区域上粘贴。

.contentEditable,
.textArea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  width: 300px;
  height: 50px;
  border: solid 1px black;
  overflow: scroll;
  padding:20px;
  margin-bottom: 20px;
}
.contentEditable::before,
.contentEditable::after {
  content:"";
  display:block;
  height:20px;
  position:sticky;
  background:#fff;
} 
.contentEditable::before {
  margin-top:-19px;
  top:-19px;
}
.contentEditable::after {
  margin-bottom:-20px;
  bottom:-20px;
}

<h3>contenteditable:</h3>
<div class="contentEditable" contenteditable spellcheck="false"></div>
<h3>textarea:</h3>
<textarea class="textArea" contenteditable spellcheck="false"></textarea>