收縮 DIV 以容納文字通常很簡單。但是，當文字因最大寬度限製而換行為多行時，DIV 無法相應縮小。這會在 DIV 的右側創造難看的邊距。
由於純 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>此程式碼片段執行以下操作：
<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>
<code class="css">p {
max-width: 250px;
padding: 10px;
background-color: #eee;
border: 1px solid #aaa;
}
#bad {
background-color: #fbb;
}</code>以上是如何使用 JavaScript 將 DIV 動態收縮為換行文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
