Как мне сохранить отступы в contenteditable div так же, как они хранятся в текстовом поле? - PullRequest
Новая
       88

Как мне сохранить отступы в contenteditable div так же, как они хранятся в текстовом поле?

0 голосов
/ 01 августа 2020

Когда я устанавливаю padding в textarea с 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 он сохраняет отступы 20 пикселей со всех четырех сторон. .

введите описание изображения здесь

Как сделать так, чтобы отступы в contenteditable вели себя так же, как в текстовом поле?

Я использую это на Firefox 78. На Chrome 84 оба работают одинаково - сохраняются только левые и правые отступы, что также не является желаемым результатом.

1 Ответ

0 голосов
/ 01 августа 2020

Вероятно, не лучшее решение, но вы можете взломать его, используя псевдоэлемент, который вы делаете липким на области заполнения с белым фоном. 

.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>
...