html - 中心position:absolute尺寸，使其完整尺寸

我有一个item在容器中有position: absolute。我将其定位为left: 50%和transform: translateX(-50%);。该item仅包含文本，我希望它覆盖其内容，文本现在将尽可能多地显示。

正如我们在下面的摘要中看到的，item有足够的空间，但是没有增加宽度。它断线了。我知道我可以添加white-space: nowrap来停止它的换行符，但是如果文本较长，则一行不能换行。

将width: 100%添加到item不能帮助，因为我希望item的宽度基于其内容是动态的。

.container {
  width: 300px;
  height: 200px;
  border: solid 1px #123;
  position: absolute;
}

.item {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #303030;
  color: #FFF;
  border-radius: 20px;
  padding: 8px 16px;
}

<div class="container">
  <div class="item">
    <span>Hello. Its me. How are you?</span>
  </div>
</div>

最佳答案

这是你想要的吗？使用left: 0, right: 0代替它居中，然后在span中移动其他样式。

.container {
  width: 300px;
  height: 200px;
  border: solid 1px #123;
  position: absolute;
}

.item {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  text-align: center;
}

.item .content {
  display: inline-block;
  width: auto;
  height: auto;
  background-color: #303030;
  color: #FFF;
  border-radius: 20px;
  padding: 8px 16px;
}

<div class="container">
  <div class="item">
    <div class="content">
      <span>Hello. Its me. How are you?</span>
    </div>
  </div>
</div>

关于html - 中心position:absolute尺寸，使其完整尺寸，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46235666/