CSS多断点下如何让Div在指定断点取文本自然宽度？

嘿，这个问题我太熟悉了！核心原因其实很简单：<div>是块级元素，默认就会占满父容器的100%宽度，所以在大屏幕上如果不做调整，它根本不会自动收缩到文本的长度。下面给你几个实用的解决方案，你可以根据自己的布局需求来选：

方案1：用width: fit-content直接控制宽度 #

这是最直接的方法，fit-content就是专门让元素宽度自适应内容的CSS属性，完美匹配你的需求。你只需要在大屏幕断点设置这个属性，小屏幕覆盖成100%就行：

/* 默认样式（对应660px及以上的大屏） */
.link-container {
  width: fit-content;
  /* 可选：加个margin避免多个div挤在一起 */
  margin: 0 8px 8px 0;
}

/* 360px及以下的小屏断点（根据你的断点方向调整，这里假设是max-width） */
@media (max-width: 360px) {
  .link-container {
    width: 100%;
    margin: 0 0 8px 0;
  }
}

如果你的断点是用min-width（比如屏幕≥360px时应用100%宽度），那写法反过来就行：

.link-container {
  /* 基础样式，比如颜色、padding等 */
}

@media (min-width: 360px) {
  .link-container {
    width: 100%;
  }
}

/* 660px及以上覆盖成自适应宽度 */
@media (min-width: 660px) {
  .link-container {
    width: fit-content;
  }
}

方案2：改变display属性让元素收缩 #

块级元素的100%宽度是默认行为，你可以把<div>改成行内块元素（inline-block），这样它的宽度就会由内容决定，小屏幕再改回块级元素占满宽度：

.link-container {
  display: inline-block;
  margin: 0 8px 8px 0;
}

@media (max-width: 360px) {
  .link-container {
    display: block;
    width: 100%;
    margin: 0 0 8px 0;
  }
}

⚠️ 注意：inline-block元素之间会有默认的间隙（因为HTML里的换行），如果想去掉，可以给父容器加font-size: 0，或者把HTML里的<div>标签连在一起写。

方案3：用Flexbox布局（最灵活） #

如果你的这些<div>需要在大屏幕上并排排列、自动换行，用Flexbox会更省心，还能轻松控制间距：

/* 父容器样式 */
.link-wrapper {
  display: flex;
  flex-direction: column; /* 小屏默认堆叠 */
  gap: 8px; /* 替代margin，更方便控制间距 */
}

@media (min-width: 660px) {
  .link-wrapper {
    flex-direction: row;
    flex-wrap: wrap; /* 内容太多时自动换行 */
  }
  .link-container {
    width: fit-content;
    /* 或者直接用flex: 0 0 auto; 效果一样 */
  }
}

/* 360px断点的样式，如果需要小屏占满宽度 */
@media (max-width: 360px) {
  .link-container {
    width: 100%;
  }
}

这个方案的优势是不用管inline-block的间隙问题，而且布局调整起来更灵活，比如要居中、改变排列顺序都很容易。

你可以根据自己的实际布局需求选其中一种，现在主流浏览器对这些属性的支持都很好，不用担心兼容性问题~

内容的提问来源于stack exchange，提问作者kb0000