使容器适合 contentEditable div 的内容

Question

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

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

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

我还尝试使用 JavaScript 通过计算 editableContent 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>

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>