JavaScript を使用して、ラップされたテキスト コンテンツに合わせて DIV のサイズを動的に変更する方法

JavaScript を使用してラップされたテキストの動的な DIV サイズ変更を実現する

CSS のみを使用して、ラップされたテキスト コンテンツの範囲まで DIV を縮小することには課題が生じます。ただし、JavaScript を使用すると、この制限を克服して目的の動作を実現できます。

提供されたコード例では、最大幅 130 ピクセルの DIV 要素 (「縮小」) に、テキストの折り返しにより不要なマージンが表示されます。 。この問題に対処するために、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 中国語 Web サイトの他の関連記事を参照してください。