如何使用 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. 取得 將 DIV 的寬度設定為
clientRect
3. 的寬度。

範例用法

<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>

此範例建立兩個具有不同填充的方塊。第一個框演示了原始問題，而第二個框使用 JavaScript 解決方案動態縮小到文字的寬度。

<code class="css">p {
  max-width: 250px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
}

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

以上是如何使用 JavaScript 將 DIV 動態收縮為換行文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！