Html CSS工具提示赢得'；t拉伸，只能有固定宽度

我有工具提示，其内容可以从很长到很短。我不想有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悬停的关键

.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

并将其替换为块级元素（如

div

with style

display:block

）

如果具有单行工具提示可以满足您的需要，您也可以添加

---

white space:pre

到

.tool content

有两件事，第一，您看到的示例的宽度为

120px。将其更改为需要修复的任何内容

或者，如果不想固定宽度，只需添加
空白：nowrap使文本显示在一行中而不换行

更新：您可以使用
display:block以便工具提示将最大宽度设置为父宽度，请参见下面的示例



.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
.tooltip.tooltiptext{
可见性：隐藏；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：5px0；
/*定位工具提示*/
位置：绝对位置；
显示：块；
z指数：1；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}
将鼠标移到下面的文本上：

在我上空盘旋
提示文本



在我上空盘旋在我上空盘旋
工具提示文本非常长



悬停在我身上悬停在我身上
工具提示文字非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长
您只需添加一个
最大宽度
，然后在css的元素或其内部分区中加入
分词：全部分词
或
换字：分词
。
可能

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

我猜你的意思是，当你不使用
position:absolute在工具提示上它将不起作用？这是因为工具提示的大小不能超过其容器的大小，当相对定位时，没有设置明确的宽度。在IE9和Chrome中看起来不错（不确定它在所有浏览器/环境中的行为）：事实上，我不好意思说它确实起作用了；在这个例子中，我去掉了我认为不需要的东西。.tooltip被附加到一个设置了宽度的div上，它覆盖了工具提示的宽度。把它交给那个部门的孩子解决了。谢谢。嗯，我可能说得有点太早了。这确实会动态缩放工具提示文本，但是如果文本比工具提示长（即，您悬停在上面的内容），工具提示文本弹出窗口将不再位于工具提示的中心位置（如我链接的页面上的“底部”示例）。是的……而且由于我的一些工具提示实际上是段落，nowrap不会飞。它只是切断了他们的联系。它需要动态地将宽度缩放到最大宽度，然后将文本换行到下一行。对不起，我知道“纯编程问题”显然是离题的，但我不知道如何实现这些。它只是不起作用。我不能将工具提示的长度限制为父级宽度，它几乎总是会更长。我一直在使用空白设置。我想要的是它听起来像预包装应该做什么（必要时包装和在线中断），除非它在实践中不这样工作。即使最大宽度为500px，它仍然以80px的速度包装文本。@L.Blissett然后我建议使用引导工具提示，如果您检查更新的代码（选项2）非常容易使用，并且您可以通过css设置最大宽度。这确实有效，并且没有本页上其他解决方案的任何限制！为什么这个答案得不到更多的选票？我想是新的吧？这对我来说就像一个魔术，尽管我的情况可能很简单。