如何使用 JavaScript 調整 DIV 大小以適合換行文字？

使用 JavaScript 調整 DIV 大小以包含換行文字

在網頁設計中，將文字封裝在 DIV 元素中通常會造成困境。雖然調整 DIV 大小以容納單行文字很簡單，但當文字由於預定的最大寬度而換行到多行時，就會出現挑戰。在這種情況下，DIV 會保持原來的大小，導致右側邊距不美觀。

這個問題無法單純透過 CSS 解決，需要探索 JavaScript 解決方案。為了實現這一點，我們可以利用以下 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`;

透過定義環繞文字周圍的範圍，我們可以擷取其邊界矩形尺寸，然後調整 DIV 的寬度以符合這些尺寸。這種方法有效地縮小了 DIV，使其與換行文字精確對齊，消除了不需要的邊距並正確對齊。

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