html - CSS 工具提示不会拉伸(stretch)，只能有固定宽度

Question

我有一些工具提示，其内容可以很长也可以很短。我不想有 3 个单词的内容和一个巨大的工具提示，但我也不想要 20 个单词并且在多行中都被揉成一团。使用当前设置，无论如何它都停留在最小宽度。

CSS:

.tooltip {
  outline: none; position: relative;
  min-width: 75px; max-width: 255px;
}

.tooltip .tool-content {
  opacity: 0; visibility: hidden;
  position: absolute;
}

.tooltip:hover .tool-content {
  background: #999; border: 1px solid #555; color: #000000;

  /* general styling */
  position: absolute; left: 1.3em; top: 2.6em; z-index: 99;
  visibility: visible; opacity: 1;
}

HTML:

<div class='tooltip'>
(content to hover)
    <span class='tool-content'>
        (tooltip content)
    </span>
</div>

让我烦恼的是我可以取消 position: relative 并且它按预期工作!然而我找不到解决方法，相对定位是(或看起来是？)让 CSS 悬停的关键。

Answer 1

也许……

width: max-content; 
max-width: 200px; /* (as much as you want) */