position: absolute child element - Не переносить текст до максимальной ширины?

Question

Я искал похожие вопросы и не нашел правильного решения ни в одном из вопросов этой проблемы, это все еще невозможно в 2020 году ...?

У меня есть родительская позиция A родственник с дочерним DIV абсолютным положением.

дочерний DIV отображается при наведении (всплывающая подсказка), но проблема в том, что текст кажется перенесенным намного раньше, чем допускает максимальная ширина DIV.

По сути, я считаю, что по какой-то причине он пытается обернуться в ширину родителя. white-space: nowrap правильно расширяет текст, но, конечно, он не будет перенесен и после достижения max-width.

#mydiv {
  width:250px;
  background: #fee;
  margin: 150px; /*just for demo purposes*/
}
#mydiv a {
  position: relative;
}
#mydiv a div {
  position: absolute;
  display: none;
  bottom: calc(100% + 1px);
  background: #eee;
  max-width: 300px;
  transform: translateX(-50%);
  left: 50%;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid black;
  /* white-space: nowrap; */ /*toggle me*/
}
#mydiv a:hover div {
  display: block;
}

<div id="mydiv">
  <a href="#">
    <div>
      Here is an example tooltip text
    </div>
    Test link
  </a>
</div>

Answer 1

A position:absolute ограничено шириной содержащего его блока. Вы можете рассмотреть отрицательное значение влево / вправо, чтобы расширить div за этим ограничением. Любое большое значение будет делать работу, оно просто должно быть одинаковым для обоих.

#mydiv {
  width:250px;
  background: #fee;
  margin: 150px; /*just for demo purposes*/
}
#mydiv a {
  position: relative;
}
#mydiv a div {
  position: absolute;
  display: none;
  bottom: calc(100% + 1px);
  background: #eee;
  max-width: 300px;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid black;
  margin:0 auto; /* Don't forget this for centring */
  left:-300px;
  right:-300px;
}
#mydiv a:hover div {
  display: block;
}

<div id="mydiv">
  <a href="#">
    <div>
      Here is an example tooltip text Here is an example tooltip text Here is an example tooltip text
    </div>
    Test link
  </a>
</div>

<div id="mydiv">
  <a href="#">
    <div>
      Here is an example
    </div>
    Test link
  </a>
</div>

Или, как показано ниже, если вы хотите сохранить поведение всплывающей подсказки

#mydiv {
  width:250px;
  background: #fee;
  margin: 150px; /*just for demo purposes*/
}
#mydiv a {
  position: relative;
}
#mydiv a div {
  position: absolute;
  display: none;
  bottom: calc(100% + 1px);
  background: #eee;
  max-width: 300px;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid black;
  margin:0 auto;
  left:-300px;
  right:-300px;
  width:max-content; /* addedd this */
}
#mydiv a:hover div {
  display: block;
}

<div id="mydiv">
  <a href="#">
    <div>
      Here is an example tooltip text Here is an example tooltip text Here is an example tooltip text
    </div>
    Test link
  </a>
</div>

<div id="mydiv">
  <a href="#">
    <div>
      Here is an example
    </div>
    Test link
  </a>
</div>

Answer 2

Надеюсь, что это поможет:)

Вот решение

#mydiv {
   width: 250px;
    background: #fee;
    margin: 150px;
}
#mydiv a {
  position: relative;
  display:block;
}
#mydiv a div {
      position: absolute;
    display: none;
    bottom: calc(100% + 1px);
    background: #eee;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid black;

}
#mydiv a:hover div {
  display: block;
}

<div id="mydiv">
  <a href="#">
    <div>
      Here is an example tooltip text
    </div>
    Test link
  </a>
</div>