Css 是否停止覆盖文本占用word wrap上容器的全部宽度？

当出现分词时，覆盖文本占据其容器的全部宽度。我只希望它占据实际文本的宽度。这可能吗

请参阅代码笔中的问题

HTML

代码笔

---

尝试添加

宽度：最小内容至
居中覆盖文本


不过，正如评论中提到的，这个。
像这样吗


.container{
显示器：flex；
证明内容：中心；
宽度：60px；
高度：60px；
背景颜色：黄色；
}
.居中覆盖文本{
文本对齐：居中；
背景颜色：蓝色；
自对准：居中；
颜色：白色；
}

地狱
耶
您不能。。。这个逻辑和你想的相反，p增长，当它达到全宽时，工作中断。。。因此，在破译词之前有完整的宽度。在not和good之间添加一个

，看看会发生什么。。。在这种情况下，前面有break一词，因此宽度可以；）既然在
容器上有宽度的静态值
为什么不将它们添加到
居中的覆盖文本中
I tested
width:40px<div class="container">
  <div class="overlay">
    <p class="centered-overlay-text">Not Good</p>
  </div>
</div>
<div class="container">
  <div class="overlay">
    <p class="centered-overlay-text">Good</p>
  </div>
</div>

.container {
  position: relative;
  width: 60px;
  height: 60px;
  background-color: yellow;
  margin-bottom: 10px;
}

.overlay {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centered-overlay-text {
  text-align: center;
  background-color: blue;
}