CSS로 텍스트 영역을 내용에 맞게 수직으로 확장할 수 있나요?

CSS를 사용하여 텍스트 영역 높이 자동 조정

웹 개발에서는 높이를 자동으로 조정할 수 있는 텍스트 영역을 생성해야 하는 경우가 많습니다. 사용자가 입력한 내용. PHP와 JavaScript가 이에 대한 솔루션을 제공하지만 복잡한 코드 없이 동일한 효과를 얻을 수 있는 우아한 CSS 해결 방법이 있습니다.

CSS를 사용하여 텍스트 영역을 콘텐츠에 맞게 수직으로 확장할 수 있습니까? div의 "overflow:show" 속성이 있습니까?

대답은 '예'입니다! CSS 속성의 영리한 조합을 사용하면 스크롤 높이에 따라 텍스트 영역의 높이를 동적으로 조정할 수 있습니다. 수행해야 할 작업은 다음과 같습니다.

<textarea name="text" oninput=' this.style.height = "";this.style.height = this.scrollHeight "px"'></textarea>

이 한 줄의 코드는 다음과 같이 작동합니다.

• this.style.height = "";: 이 줄은 텍스트 영역의 높이를 기본값으로 재설정하여 다음을 허용합니다. 필요한 경우 축소합니다.
• this.style.height = this.scrollHeight "px": 이 줄은 텍스트 영역의 높이를 스크롤 높이(표시되는 콘텐츠의 높이)에 작은 패딩을 더한 값과 동일하게 동적으로 설정합니다. 잠재적인 콘텐츠 오버플로를 고려하세요.

이 CSS 솔루션을 사용하면 콘텐츠에 맞게 자동으로 확장 및 축소되는 텍스트 영역을 만들어 추가 코딩 없이 사용자 친화적인 편집 환경을 제공할 수 있습니다.

위 내용은 CSS로 텍스트 영역을 내용에 맞게 수직으로 확장할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!