JavaScript를 사용하여 DIV의 크기를 래핑된 텍스트 콘텐츠에 맞게 동적으로 조정하는 방법은 무엇입니까?

JavaScript를 사용하여 래핑된 텍스트에 대한 동적 DIV 크기 조정

CSS만 사용하여 래핑된 텍스트 콘텐츠 범위까지 DIV를 축소하는 것은 어려운 일입니다. 그러나 JavaScript를 사용하면 이러한 제한을 극복하고 원하는 동작을 얻을 수 있습니다.

제공된 코드 예제에서 최대 너비가 130px인 DIV 요소("shrunken")는 텍스트 줄 바꿈으로 인해 원치 않는 여백을 나타냅니다. . 이 문제를 해결하기 위해 JavaScript를 활용하여 래핑된 콘텐츠의 실제 너비를 계산하고 이에 따라 DIV 크기를 조정합니다.

<code class="js">const range = document.createRange();
const text = p.childNodes[0];
range.setStartBefore(text);
range.setEndAfter(text);
const clientRect = range.getBoundingClientRect();
p.style.width = `${clientRect.width}px`;</code>

이 코드 조각은 createRange() 함수를 활용하여 래핑된 콘텐츠를 포함하는 범위를 정의합니다. 텍스트. 그런 다음 getBoundingClientRect()는 정의된 범위에 대한 경계 사각형을 계산하여 텍스트 콘텐츠의 너비를 효과적으로 결정합니다. 마지막으로 DIV의 너비는 이 너비와 일치하도록 동적으로 설정되어 래핑된 텍스트에 딱 맞습니다.

위 내용은 JavaScript를 사용하여 DIV의 크기를 래핑된 텍스트 콘텐츠에 맞게 동적으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!