CSS宽度：使用高于特定宽度的min-content

Question

更新：添加了一个额外的图片并添加了红色箭头，以更清楚地指出我的问题。

我正在尝试正确设置文本的工具提示。我遇到的问题是，我使用最大宽度值来强制文本换行超过一定的宽度。

然后我发现了min-content，但它缩小到了文本中最大的单词。因此，对于长文本，这会创建一个很长的垂直工具提示。

有没有办法将两种方法结合起来，并且只使用超出一定最小宽度的最小内容，同时允许非常短的文本也能正确显示？

以下是3个例子：

第一个，max-width: 120px，你可以看到文本的每一面都有不必要的空间，而较小的一个（这是正确的）。

使用width: min-content，一切都缩小到最大的单词，使其难以阅读。

使用width: min-content的最后一个例子，文字足够短，我不希望它包装

Answer 1

使用display: inline-block, min-width, max-width, padding，您将获得所需内容。

＆＃13;

＆＃13;

.tooltip {
  min-width: 50px;
  max-width: 150px;
  background-color: rgba(0,0,0, .4);
  border-radius: 4px;
  padding: 7px 7px;
  text-align: center;
  display: inline-block;
}

＆＃13;

<div class="tooltip">
  <span>Little tooltip</span>
</div>
<br><br>
<div class="tooltip">
  <span>Very long tooltip but not that long as expected, looks cool.</span>
</div>

＆＃13;

＆＃13;

＆＃13;