html - CSS Positioned Absolute Element，父边界之外的自动宽度？

Question

因此，我将我的父元素定位为相对位置，以便让工具提示元素绝对定位在其内部的顶部。我知道您需要添加“左:0，右:0”，这样元素的宽度仍然可以设置为自动，我已经这样做了。但是，我的父元素有一个固定的宽度，工具提示被限制到这个宽度，所以自动宽度不能超出它，有什么办法解决这个问题吗？

CSS:

.parent {
  position: relative;
  width: 100px;
  height: 100px;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  width: auto;
  padding: 5px 10px;
}

元素:

<div class="parent">
  <div class="tooltip">Text goes here</div>
</div>

请不要 JS，寻找 CSS 解决方案，谢谢!

Answer 1

不要在 .tooltip 上同时设置 left 和 right，设置 white-space: nowrap 应该可以它:

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
  text-align: center;
  width: auto;
  padding: 5px 10px;
  white-space: nowrap;
}

Working example .

你需要使用 this solution 使绝对元素居中。不过，它确实需要一个额外的元素。 <强> Demo