D3 Tip Multi-line for Long Tool-tips（简称auto）

Question

我一直在使用D3 Tip大约一年，并且非常喜欢它的功能。如果你不确定它是什么，你可以看到D3 Tip in action here。虽然，这个问题可能不是100％特定于此库。

过去我曾将它用于简短的事物，悬停数据值，名称等。然而，最近我有一个应用程序需要使用中等长度的文本模糊工具提示内容。问题是，文本没有进入下一行，它只显示一个很长的1个班轮。

工具提示样式的CSS：

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

数据结构：

var data = [
    {
      value: .2,
      text:'This text is longer than your average tool-tip can handle. Special handling may be required for best results.'
    },
    {
      value: .3,
      text:'This text is also longer than your average tool-tip can handle. Special handling may be required for best results.'
    }
];

我尝试了什么：我尝试了不同的显示设置，例如inline-block，block，width:auto。我注意到当我将CSS设置为width:200px;时，它往往看起来正确，但是这使得我的可视化部分具有笨拙/过大的短工具提示。

我的问题：有没有办法让短文本和长文本工具提示看起来自然？

警告没有真正明确的方法可以知道哪个应该是大的还是小的，如果你愿意的话，这是一种数据紧急的属性。所以我需要一个聪明的风格规则或其他方法。据我所知，CSS不支持“if”逻辑，而且我没有新意见。