JavaScript で DIV を縮小して折り返されたテキストに合わせる方法

JavaScript を使用した折り返されたテキストの DIV 展開の問題の解決

CSS のみを使用する場合、最大幅まで折り返されたテキストに合わせて DIV を縮小するという課題がよく発生します。このハードルを克服し、完全に中央揃えの DIV を実現するには、JavaScript を実装することが効果的な解決策です。

提供された jsfiddle に示されているように、折り返されたテキストの周囲の過剰な右側のマージンは、DIV が初期幅を維持しているためです。 max-width プロパティによって設定されます。これを修正するために、次の JavaScript アプローチを採用します。

1. Create a Range: document.createRange() を使用して、ターゲットの DIV 内のテキストを含む範囲オブジェクトを作成します。 .
2. 範囲境界の設定: setStartBefore メソッドと setEndAfter メソッドは、テキストの先頭と末尾までの範囲の開始点と終了点をそれぞれ定義します。
3. Get Bounding Client Rectangle: getBoundingClientRect() メソッドは、範囲内のテキストの寸法を取得します。
4. Update DIV width: DIV の幅は、

この JavaScript ソリューションを実装すると、折り返されたテキストに合わせて DIV を効果的に縮小でき、結果として、中央揃えで視覚的に心地よいレイアウト。

以上がJavaScript で DIV を縮小して折り返されたテキストに合わせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。