如何使用 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中文网其他相关文章！