收縮 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中文網其他相關文章!