Bagaimanakah saya boleh mengubah saiz kawasan teks supaya ia sesuai dengan lebar kandungan dan menetapkan lebar minimum dan maksimum?

Question

Jadi, saya menghadapi masalah sekarang dengan kawasan teks, saya tidak boleh mengubah saiznya kepada lebar kandungan... Saya menemui jawapan yang panjang dan terperinci tentang ketinggian kandungan dan ia berfungsi! Tetapi tiada lebar kandungan di atas...

Ini ialah artikel itu: Mencipta kawasan teks dengan saiz semula automatik

Namun, masalah saya tidak selesai, saya perlu melaraskan lebar juga. Pertimbangkan lebar maksimum dan minimum.

Ini ialah kod contoh:

$("textarea").setiap(fungsi () {
  this.setAttribute("style", "height:" + (this.scrollHeight) + "px;");
}).on("input", fungsi () {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) + "px";
});
$("textarea").trigger("input");

textarea{
  sempadan: 1px hitam pejal;
  lebar min: 50px;
  lebar maksimum: 300px;
  lebar: auto;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js">< ;/skrip>
<textarea>ini adalah kandungan biasa saya, dan ia perlu menganggap kandungan ini selagi lebar maksimum</textarea>
<textarea>ini adalah kandungan biasa saya, harus dipertimbangkan</textarea>
<textarea>ini ialah kandungan min saya</textarea>

Selain itu, inilah yang saya mahu mereka menjadi:

Answer 1

Adakah ia serupa dengan ini?

Nota: Seperti yang dinyatakan dalam komen, teknik ini menggunakan atribut contenteditable

#myInput {
  min-height: 20px;
  max-height: 100px;
  overflow: auto;
  border: 1px solid #000;
  border-radius: 4px;
  max-width: 80%;
  min-width: 40px;
  display: inline-block;
  padding: 7px;
  resize: vertical;
}

<div contenteditable id="myInput"></div>