CSS定位绝对元素,自动宽度超出父边界？

Question

所以,我将我的父元素定位为相对,以便允许工具提示元素在其顶部位于绝对内部.我知道你需要添加"left:0,right:0",这样元素的宽度仍然可以设置为auto,我已经完成了.但是,我的父元素有一个固定的宽度,工具提示被限制,因此自动宽度不能超出它,是否有任何解决方法？

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

不设置left和right打开.tooltip,设置white-space: nowrap应该这样做:

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

工作实例.

您需要使用此解决方案来居中绝对元素.但它确实需要一个额外的元素.演示

Answer 2

我相信这个问题的最佳解决方案不是设置 left，right或者white-space: nowrap我们有一个新的宽度属性值max-content......所以只需添加width: max-content;（这个max-width也适用）

演示：http : //jsfiddle.net/qLgw8bxu/

支持：https : //caniuse.com/#search=max-content

.tooltip {
 background-color: blue;
 position: absolute;
 text-align: center;
 padding: 5px 10px;

 width: max-content;
}

Answer 3

如果.parent可以内联，您可以将.tooltip渲染作为表格，并且它将自动调整大小以适合其内容，但与使用 不同的是white-space:nowrap，它还支持max-width.

.parent {
  display: inline;
  position: relative;
}

.tooltip {
  position: absolute;
  display: table;
  top: 0;
  left: 0;
  text-align: center;
  padding: 5px 10px;
  max-width: 200px;
}