JavaScript を使用して DIV をラップされたテキストに動的に縮小するにはどうすればよいですか?

JavaScript を使用して DIV を動的に縮小してラップされたテキストにする

テキストに合わせて DIV を縮小するのは、通常は簡単です。ただし、最大幅の制約によりテキストが複数行に折り返されると、それに応じて DIV は縮小されません。これにより、DIV の右側に見苦しいマージンが作成される可能性があります。

JavaScript ソリューション

純粋な 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>

このコード スニペットは次の処理を行います。

1. テキストをカプセル化する範囲を作成します。
2. を取得します。 >clientRect のテキスト。
3. DIV の幅を clientRect の幅に設定します。

使用例< /h3>

<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></p>
<pre class="brush:php;toolbar:false"><code class="css">p {
  max-width: 250px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
}

#bad {
  background-color: #fbb;
}</code>

この例では、パディングが異なる 2 つのボックスを作成します。最初のボックスは元の問題を示していますが、2 番目のボックスは JavaScript ソリューションを使用してテキストの幅に動的に縮小します。

以上がJavaScript を使用して DIV をラップされたテキストに動的に縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。