在前端开发中，我们经常需要响应浏览器窗口或父元素尺寸变化而动态调整 DOM 元素的大小。但有些情况下，我们需要根据内容自动撑开元素宽度，这时候该如何实现呢？本文将介绍如何使用 CSS 和 JavaScript 实现这一目标。
使用 display: inline-block
第一种方法是将元素的 display 属性设置为 inline-block，然后设置 width: auto。这样，在没有指定固定宽度的情况下，元素会自适应内容的宽度，并且能够随着内容的改变而自动调整宽度。
<div class="box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
.box {
display: inline-block;
width: auto;
border: 1px solid black;
padding: 10px;
}上述代码将创建一个包含文本内容的 <div> 元素，并将其样式设置为 display: inline-block，以便使它能够自适应其内容的宽度。此外，还设置了边框和内边距来更好地显示效果。
使用 flex 布局
如果你更喜欢使用现代的布局方式，那么可以考虑使用 flex 布局。这种方法可以更方便地控制元素的布局，并且能够响应父元素或容器的变化。
<div class="container">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>-- -------------------- ---- ------- ---------- - -------- ----- - ---- - ---------- -- ------- --- ----- ------ -------- ----- -
上述代码使用了一个包含子元素的容器，然后将其样式设置为 display: flex。在子元素中，我们使用了 flex-grow: 1 来使其宽度自适应父元素的宽度（如果有多个子元素，则会根据比例分配宽度）。
使用 JavaScript
最后，我们可以使用 JavaScript 实现动态调整元素宽度的效果。通过获取元素内容的宽度，然后将其应用于元素的 CSS 属性中，就可以实现该功能。
<div id="box" class="box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
.box {
border: 1px solid black;
padding: 10px;
}const box = document.getElementById('box');
const width = box.offsetWidth;
box.style.width = `${width}px`;上述代码使用了 JavaScript 获取了 <div> 元素的宽度，并将其应用于样式属性中，以便实现动态调整元素宽度的效果。
结论
以上三种方法都可以实现响应自动大小的 DOM 元素宽度的效果。其中，使用 CSS 的两种方法更加简洁和易于维护，而使用 JavaScript 则能够提供更大的灵活性和控制力。具体使用哪一种方法，可以根据实际需求和个人喜好来选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11694
