CSS工具提示不会拉伸,只能有固定的宽度

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>

令我感到困扰的是,我可以脱掉位置:相对而且它按预期工作!然而,我找不到任何解决方法,并且相对定位是让CSS徘徊的关键(或似乎是？).

Answer 1

也许......

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

Answer 2

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

.tooltip .tool-content {
  margin:0;
  padding:0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width:100%;
  height:100%;
}

您可以删除span它并用块级元素替换它（如divstyle display:block）