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

Working example.

Вам необходимо использовать this solution чтобы центрировать абсолютный элемент. Однако для этого требуется дополнительный элемент. Demo

Answer 2

Я не видел эту проблему раньше, но то, что я думаю, происходит, заключается в том, что width: auto; автоматически наследует свойства своего родителя. Поэтому либо вы должны ввести число в (width: 50px;), либо процент (width: 50%).

Answer 3

Если .parent может быть встроенным, вы могли бы сделать .tooltip визуализации в виде таблицы, и она будет Autosize, чтобы соответствовать его содержимое, но в отличие от использования 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; 
}