移除换行时子元素上的多余间距

我太懂你遇到的这个问题了！固定宽度的父容器里套着子div，文本一换行，子div右边就空出一大块多余空间，看着特别不美观对吧？先给你说个CSS优先的解决方案，毕竟能不用JS就不用嘛～

CSS/HTML 方案 #

核心思路就是让子元素的宽度完全贴合文本内容，不管文本有没有换行。这里有两个靠谱的方法：

方法1：使用 width: fit-content

这是现代浏览器支持的属性，直接让元素宽度适配内容，非常直观：

<div class="parent">
  <div class="child">
    这里是可能会换行的长文本内容，比如当父容器宽度不够时，文本会自动换行，子div宽度会刚好包裹住文本，不会留右侧多余空间。
  </div>
</div>

.parent {
  width: 200px; /* 你的固定宽度 */
  border: 1px solid #eee; /* 加边框方便看效果，可移除 */
}

.child {
  width: fit-content; /* 关键属性 */
  /* 兼容老浏览器的前缀，可选 */
  width: -moz-fit-content;
  width: -webkit-fit-content;
  background: #f5f5f5; /* 加背景色更直观，可移除 */
}

方法2：使用 display: table

如果需要兼容更老的浏览器（比如IE），display: table 是个不错的替代方案，因为表格元素的宽度默认由内容决定：

.child {
  display: table;
  background: #f5f5f5;
}

JavaScript 方案（万不得已时用） #

如果上述CSS方案因为某些限制没法用，那可以用JS动态计算文本的实际宽度，再给子div设置宽度：

document.addEventListener('DOMContentLoaded', function() {
  const childDiv = document.querySelector('.child');
  // 创建Range对象来计算文本的实际宽度
  const range = document.createRange();
  range.selectNodeContents(childDiv);
  const textWidth = range.getBoundingClientRect().width;
  // 设置子div的宽度
  childDiv.style.width = `${textWidth}px`;
});

注意：如果文本是动态加载的，要在文本加载完成后再执行这段代码哦～

备注：内容来源于stack exchange，提问作者Pablo Santamaria