<p>所以，我現在在文字區域方面遇到了麻煩，我無法將其調整為內容寬度... 我找到了關於內容高度的長而詳細的答案，而且它有效！但上面沒有內容寬度...</p> <p>這就是那篇文章：創建具有自動調整大小的文字區域</p> <p>但是，我的問題沒有解決，我也需要調整寬度。考慮最大和最小寬度。 </p> <p>這是範例程式碼：</p> <p> <pre class="brush:js;toolbar:false;">$("textarea").each(function () { this.setAttribute("style", "height:" (this.scrollHeight) "px;"); }).on("input", function () { this.style.height = 0; this.style.height = (this.scrollHeight) "px"; }); $("textarea").trigger("input");</pre> <pre class="brush:css;toolbar:false;">textarea{ border: 1px solid black; min-width: 50px; max-width: 300px; width: auto; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js">< ;/script> <textarea>this is my normal content, and it has to consider this content to be as long as the max-width</textarea> <textarea>this is my normal content, should be consider</textarea> <textarea>this is my min content</textarea></pre> </p> <p>另外，這就是我希望它們成為的樣子：</p>

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