JavaScript를 사용하여 줄 바꿈된 텍스트에 맞게 DIV 크기를 조정하는 방법은 무엇입니까?

JavaScript를 사용하여 줄 바꿈된 텍스트를 수용하도록 DIV 크기 조정

웹 디자인에서 DIV 요소 내에 텍스트를 캡슐화하면 종종 딜레마가 발생할 수 있습니다. 한 줄의 텍스트를 수용하도록 DIV의 크기를 조정하는 것은 간단하지만 미리 결정된 최대 너비로 인해 텍스트가 여러 줄로 줄 바꿈되는 경우 문제가 발생합니다. 이러한 시나리오에서는 DIV가 원래 크기를 유지하므로 오른쪽에 보기 흉한 여백이 생깁니다.

이 문제는 CSS만으로는 해결할 수 없으므로 JavaScript 솔루션을 탐색해야 합니다. 이를 달성하기 위해 다음 JavaScript 코드를 활용할 수 있습니다.

const range = document.createRange();
const p = document.getElementById('good');
const text = p.childNodes[0];
range.setStartBefore(text);
range.setEndAfter(text);
const clientRect = range.getBoundingClientRect();
p.style.width = `${clientRect.width}px`;

줄 바꿈된 텍스트 주위에 범위를 정의하여 경계 사각형 크기를 검색한 다음 해당 크기에 맞게 DIV의 너비를 조정할 수 있습니다. 이 접근 방식은 DIV를 효과적으로 축소하여 줄 바꿈된 텍스트에 정확하게 정렬하고, 원하지 않는 여백을 제거하고 적절한 정렬을 가능하게 합니다.

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