JavaScript を使用して、折り返されたテキストに合わせて DIV のサイズを変更するにはどうすればよいですか?

JavaScript を使用して折り返されたテキストを受け入れるように DIV のサイズを変更する

Web デザインでは、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 中国語 Web サイトの他の関連記事を参照してください。