Как задать блоку/элементу с аттрибутом contenteditabletrue размеры так чтобы текст не выходил

text-wrap

 

Создания блока или элемента с атрибутом contenteditable:

<div id="container">
<div class="editable" contenteditable="true"></div>
</div>

HTML

<div id="container">

  <div class="editable" contenteditable="true"></div>

</div>

#container {
width: 300px; /* Задайте ширину по своему усмотрению */
border: 1px solid #ccc;
overflow: hidden;
}

.editable {
min-height: 20px; /* Минимальная высота блока */
padding: 5px;
border-bottom: 1px solid #ccc;
}

CSS

#container {

  width: 300px; /* Задайте ширину по своему усмотрению */

  border: 1px solid #ccc;

  overflow: hidden;

}



.editable {

  min-height: 20px; /* Минимальная высота блока */

  padding: 5px;

  border-bottom: 1px solid #ccc;

}

document.addEventListener("keydown", function (e) {
if (e.key === "Enter") {
e.preventDefault();
const editable = document.querySelector(".editable");
const container = document.getElementById("container");

if (editable.offsetHeight >= container.offsetHeight - 10) {
// Создаем новый блок
const newEditable = document.createElement("div");
newEditable.className = "editable";
newEditable.contentEditable = true;
container.appendChild(newEditable);

// Передвигаем фокус ввода в новый блок
newEditable.focus();
}
}
});

JS

document.addEventListener("keydown", function (e) {

  if (e.key === "Enter") {

    e.preventDefault();

    const editable = document.querySelector(".editable");

    const container = document.getElementById("container");



    if (editable.offsetHeight >= container.offsetHeight - 10) {

      // Создаем новый блок

      const newEditable = document.createElement("div");

      newEditable.className = "editable";

      newEditable.contentEditable = true;

      container.appendChild(newEditable);



      // Передвигаем фокус ввода в новый блок

      newEditable.focus();

    }

  }

});

При нажатии Enter проверяется высота текущего блока с атрибутом contenteditable