CSS实现：内容宽度增大时自动减少内边距至零

可行，你可以通过CSS Grid实现这个需求。核心思路是用三列布局，左右两列作为动态调整的“内边距区域”，当文本较短时保持5em宽度，当文本过长即将换行时自动收缩为0，从而避免文本换行。

修改后的代码 #

CSS

.outer {
  background-color: red;
  display: flex;
  justify-content: center;
}

.inner {
  display: grid;
  /* 左右列最小0，最大5em；中间列自适应文本宽度 */
  grid-template-columns: minmax(0, 5em) min-content minmax(0, 5em);
  backdrop-filter: blur(6px);
  background-color: blue;
  color: white; /* 可选，提升文本可读性 */
}

.inner span {
  /* 让文本只占据中间列 */
  grid-column: 2;
}

HTML

<div class="outer">
  <div class="inner">
    <span>This should have padding of 5em</span>
  </div>
</div>
<br>
<div class="outer">
  <div class="inner">
    <span>This text should have no padding. This text should have no padding. This text should have no padding. This text should have no padding. This text should have no padding.</span>
  </div>
</div>

工作原理 #

1. Grid布局结构：.inner使用三列网格，左右两列设置为minmax(0, 5em)，意味着它们的宽度最大为5em，最小可以收缩到0；中间列用min-content，宽度完全由文本内容决定。
2. 动态内边距：当文本较短时，左右列保持5em宽度，形成视觉上的内边距，同时.inner的背景和模糊效果会覆盖整个网格区域（包括左右列），满足你保留模糊背景的需求。
3. 避免换行：当文本长度接近容器宽度时，左右列会自动收缩为0，让文本占据全部可用宽度，尽可能避免换行。只有当文本长度超过容器宽度时，才会触发换行。

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