屏幕缩小时移除div内部多余空白的CSS实现问询

核心思路是让Grid容器的列宽度自适应内容最小尺寸，同时让内部div的宽度紧贴文本，彻底消除多余空白。

代码实现 #

HTML结构 #

<div class="grid-container">
  <div class="content-box">这里是需要换行的文本内容，屏幕缩小时文本会自动换行，边框将紧贴文本边缘。</div>
</div>

CSS样式 #

.grid-container {
  display: grid;
  /* 设置列宽为内容最小所需宽度 */
  grid-template-columns: min-content;
  /* 可选：根据布局需求调整对齐方式，比如居中 */
  justify-content: center;
}

.content-box {
  border: 1px solid #000;
  padding: 0; /* 按需求保持为0px */
  /* 强制盒子宽度适配文本内容 */
  width: fit-content;
  /* 限制最大宽度不超过容器，避免小屏幕溢出 */
  max-width: 100%;
}

关键属性说明 #

• grid-template-columns: min-content：让Grid列的宽度等于列内内容的最小必要宽度，刚好容纳换行后的文本，不会出现多余空白。
• width: fit-content：确保div的宽度严格贴合文本内容，即使在Grid布局中也能避免容器无意义拉伸。
• max-width: 100%：防止文本过长时超出屏幕范围，保证小屏幕下文本正常换行且边框依然紧贴内容。

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