텍스트를 수용하기 위해 DIV를 축소하는 것은 일반적으로 간단합니다. 그러나 최대 너비 제한으로 인해 텍스트가 여러 줄로 줄 바꿈되면 DIV가 그에 따라 축소되지 않습니다. 이로 인해 DIV 오른쪽에 보기 흉한 여백이 생길 수 있습니다.
순수한 CSS 솔루션은 불가능하므로 JavaScript로 전환합니다. 역동적인 접근을 위해 다음 코드 조각은 방법을 보여줍니다.
<code class="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`;</code>
이 코드 조각은 다음을 수행합니다.
<code class="html"><p id="bad">This box has a max width but also_too_much_padding.</p> <p id="good">This box has a max width and the_right_amount_of_padding.</p></code>
<code class="css">p { max-width: 250px; padding: 10px; background-color: #eee; border: 1px solid #aaa; } #bad { background-color: #fbb; }</code>
위 내용은 JavaScript를 사용하여 DIV를 래핑된 텍스트로 동적으로 축소하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!