如何使用 JavaScript 将 DIV 动态收缩为换行文本？

使用 JavaScript 将 DIV 动态收缩为换行文本

收缩 DIV 以容纳文本通常很简单。但是，当文本由于最大宽度限制而换行为多行时，DIV 无法相应缩小。这会在 DIV 的右侧创建难看的边距。

JavaScript 解决方案

由于纯 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>

此代码片段执行以下操作：

1. 创建封装文本的范围。
2. 获取 将 DIV 的宽度设置为
clientRect
3. 的宽度。

示例用法< /h3>

<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>此示例创建两个具有不同填充的框。第一个框演示了原始问题，而第二个框使用 JavaScript 解决方案动态缩小到文本的宽度。<pre class="brush:php;toolbar:false"><code class="css">p {
  max-width: 250px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
}

#bad {
  background-color: #fbb;
}</code>

以上是如何使用 JavaScript 将 DIV 动态收缩为换行文本？的详细内容。更多信息请关注PHP中文网其他相关文章！