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

Question

所以，我将父元素定位为相对定位，以便让工具提示元素在其内部绝对定位于顶部。我知道您需要添加“left: 0, right: 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解决方案，谢谢！

- Danny

---

看起来你的 CSS 需要使用 .tooltip 而不是 .child... - Honore Doktorr

@HonoreDoktorr 这只是在更改类名称时出现的错误。 - Danny

@isherwood，这样做并不能让流动宽度超出父元素的范围。如果我的工具提示大于100px，文本将仍然延伸到元素外部，但其实际宽度仍将保持在内部。 - Danny

我猜测了一下，其实我并不明白你的场景。也许需要一个演示？ http://jsfiddle.net - isherwood

@isherwood 抱歉如果我没有解释清楚，请看一下Honore Doktorr的答案中提供的示例，它已经解决了我的问题，但是我需要元素显示在中心，因此该元素应该均匀地位于父div的左右两侧。 - Danny

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

这是一个可用的示例。

如果您想要居中定位一个绝对元素，您需要使用这个解决方案。不过它需要添加一个额外的元素。 演示

- Honore Doktorr

---

谢谢，这在宽度方面有效，但不幸的是我的元素不再居中于父容器内！ - Danny

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Honore Doktorr

@isherwood 其实是对的，我的第二个例子只是 看起来 可以工作，因为我的示例工具提示的长度，但这个却不行：http://jsfiddle.net/xkok9v4p/4/ - Honore Doktorr

@isherwood 把那个作为答案，正是我所需要的，完美地运行了，谢谢！ - Danny

我将其添加到了这个答案中。 - isherwood

虽然这样做可以实现“自然”大小，但也会阻止div内内容的自然流动。下面的答案允许以通常的方式显示内容，同时具有完整的自然大小和布局。 - StephenRios

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

- Joe Koker

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

- Steven Vachon

---

它非常完美，像最大宽度一样棒。 - dannyliu

屏幕阅读器和类似的辅助技术可能会将此内容读作表格，这可能会带来困惑。 - Hrvoje Golcic

Answer 4

我之前没有遇到过这个问题，但我认为情况是这样的：width: auto; 会自动继承其父元素的属性。因此，你需要在其中填入数字（width: 50px;）或百分比（width: 50%）。请注意，保留HTML标签。

- Jasper van Amerongen

---

我希望宽度根据内容自适应，目前它不能超过父元素的100像素，文本会溢出到外面，但实际元素宽度仅为100像素。 - Danny

Answer 5

使用 white-space: nowrap; 和绝对定位的自动宽度

.class {
  white-space: nowrap;
  width: auto;
  position: absolute;
}

- Gaurav Patil