javascript - 使容器适合 contentEditable div 的内容

Question

我正在尝试制作可拖动的 div，其中包含可以编辑的文本。

但是对于固定的高度和宽度，容器 div 不适合editableContentdiv 的内容。

将.container高度设置为auto，工作正常，但我希望它可以调整大小，所以它不起作用。

我还尝试使用 JavaScript 通过计算可编辑内容 div 的每个换行符来设置容器高度，但是当我不按下enter它时，它不算作<br>

我真的很感激任何指导。

.container {
  position: absolute;
  top: 50px;
  left: 50px;
  height: 150px;
  width: 200px;
  border: 1px solid green;
  display: flex;
  box-sizing: border-box;
}

.content {
  width: auto;
  height: auto;
  word-break: break-all;
  white-space: break-spaces;
  flex: 1
}

<div class="container">
  <div class="content" contentEditable></div>
</div>

标签： javascripthtmlcss

Answer 1

您可以使用 textarea 属性。

.container {
  position: absolute;
  top: 50px;
  left: 50px;
  height: 150px;
  width: 200px;
  border: 1px solid green;
  display: flex;
  box-sizing: border-box;
}

.content {
  width: auto;
  height: auto;
  word-break: break-all;
  white-space: break-spaces;
  flex: 1
}

<textarea class="container">
  <textarea class="content"></textarea>
</textarea>