如何使用 JavaScript 動態調整 DIV 的大小以換行文字內容？

使用 JavaScript 實作換行文字的動態 DIV 大小調整

僅使用 CSS 將 DIV 縮小到換行文字內容的範圍是一個挑戰。但是，可以使用 JavaScript 來克服此限制並實現所需的行為。

在提供的程式碼範例中，最大寬度為 130 像素的 DIV 元素（「收縮」）由於文字換行而出現不需要的邊距。為了解決這個問題，利用 JavaScript 來計算包裹內容的實際寬度，並據此調整 DIV 大小。

<code class="js">const range = document.createRange();
const text = p.childNodes[0];
range.setStartBefore(text);
range.setEndAfter(text);
const clientRect = range.getBoundingClientRect();
p.style.width = `${clientRect.width}px`;</code>

此程式碼片段利用 createRange() 函數來定義包含包裹內容的範圍文字。然後， getBoundingClientRect() 計算定義範圍的邊界矩形，有效地決定文字內容的寬度。最後，動態設定 DIV 的寬度以符合此寬度，從而緊密貼合環繞的文字。

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