Html 如何将跨距宽度强制为内部文本的长度？

我有一个图标，当鼠标悬停在上面时会显示一个工具提示。我是根据这张照片做的

代码如下：

。工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：120px；
/*我希望根据文本长度更改此设置*/
背景色：黑色；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：5px0；
/*定位工具提示*/
位置：绝对位置；
z指数：1；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}

将鼠标移到下面的文本上：

在我上空盘旋
一些相当长的工具提示文本应该只显示在两行上。

只需设置

空白：nowrap而不是在
.tooltip.tooltiptext上设置宽度


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

将鼠标移到下面的文本上：

在我上空盘旋
一些相当长的工具提示文本应该只显示在两行上。
以下内容将保留至少120px宽的工具提示，并防止文本自行换行（

标记需要用于换行）。如果消息太长，它也会破裂/看起来很难看



.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
.tooltip.tooltiptext{
可见性：隐藏；
最小宽度：120px；/*最小宽度确保其始终至少为120px*/
空白：nowrap；/*防止文本自行换行*/
背景色：黑色；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：5px0；
/*定位工具提示*/
位置：绝对位置；
z指数：1；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}
将鼠标移到下面的文本上：

在我上空盘旋
一些相当长的工具提示文本应该只显示在两行上。