停止叠加文本占用自动换行的容器的全宽度？

Question

当有单词分隔符时，覆盖文本会占用其容器的整个宽度。我只希望它占用实际文本的宽度。这可能吗？

查看codepen中的问题。

HTML

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

CSS

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

codepen

https://codepen.io/anon/pen/MVpLKz

Answer 1

尝试将width: min-content;添加到centered-overlay-text

Like so

正如评论中所述，这是isn't fully cross-browser。

Answer 2

喜欢这个吗？

a

.container {
  display: flex;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: yellow;
}

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