콘텐츠 너비에 맞게 텍스트 영역의 크기를 조정하고 최소 및 최대 너비를 설정하려면 어떻게 해야 합니까?

Question

현재 텍스트 영역에 문제가 있어서 콘텐츠 너비에 맞게 크기를 조정할 수 없습니다... 콘텐츠 높이에 대한 길고 자세한 답변을 찾았으며 작동합니다! 그런데 위에 내용 너비가 없습니다...

자동 크기 조정을 사용하여 텍스트 영역 만들기

하지만 문제가 해결되지 않아서 너비도 조정해야 합니다. 최대 및 최소 너비를 고려하세요.

샘플 코드는 다음과 같습니다.

$("textarea").each(function () {
  this.setAttribute("style", "height:" + (this.scrollHeight) + "px;");
}).on("입력", 함수 () {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) + "px";
});
$("textarea").trigger("input");

텍스트 영역{
  테두리: 1px 단색 검정;
  최소 너비: 50px;
  최대 너비: 300px;
  너비: 자동;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js">< ;/스크립트>
<textarea>이것은 제가 일반적으로 사용하는 콘텐츠이며, 이 콘텐츠가 max-width</textarea>만큼 긴 것으로 간주해야 합니다.
<textarea>이것은 나의 일반적인 콘텐츠이므로 고려해야 합니다</textarea>
<textarea>이것은 내 최소 콘텐츠입니다</textarea>

그리고 제가 바라는 것은 다음과 같습니다.

Answer 1

이것과 비슷해요?

참고: 댓글에서 언급했듯이 이 기술은 contenteditable 속성

을 사용합니다.

으아악 으아악