Html CSS 随着内容宽度的增加而减少填充

发布于05月16日

我有一个居中的div，里面有文字，背景模糊.当文本的宽度小于div%时，我想要填充(基本上只是模糊的背景)，比如说5em.如果文本足够宽，可以换行，我希望填充减少到零，因此换行被推迟到绝对必要的时候.我try 过的min/max或clamp都没有达到预期的效果.这个是可能的吗？

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

.inner {
  padding-left: 5em;
  padding-right: 5em;
  backdrop-filter: blur(6px);
  background-color: blue;
}

<div class="outer">
  <div class="inner">
    This should have padding of 5em
  </div>
</div>
<br>
<div class="outer">
  <div class="inner">
    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.
  </div>
</div>

推荐答案

您可以在Flexbox中添加两个人造元素，而不是填充.这些元素充当弹性项，允许您指定flex和max-width:

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

.outer::before,
.outer::after {
  content: "";
  flex: 1 1 auto;
  max-width: 5em;
}

.outer::before,
.outer::after,
.inner {
  backdrop-filter: blur(6px);
  background-color: gray;
}

<div class="outer">
  <div class="inner">
    This should have padding of 5em
  </div>
</div>
<br>
<div class="outer">
  <div class="inner">
    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.
  </div>
</div>