我有一個居中的div，里面有文本，背景模糊。當(dāng)文本的寬度小于100%時，我希望填充(基本上只是模糊的背景)，比如說，5em。如果文本足夠?qū)捒梢該Q行，我希望填充減少到零，所以換行被推遲到絕對必要的時候。我嘗試過的最小/最大或鉗制都沒有達到預(yù)期的效果。這可能嗎？

.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內(nèi)部添加兩個人造元素。這些元素作為伸縮項，允許您指定伸縮和最大寬度:

.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>