我可以使（绝对定位的）元素增长到一定的宽度而没有换行符吗？

Question

使用工具提示考虑以下元素：

[data-tooltip] {
  position: relative;
}
/*[data-tooltip]:hover::before {
  display: block;
}*/
[data-tooltip]::before {
  /*display: none;*/
  content: attr(data-tooltip);
  z-index: 1; background: white;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  
    /* the main thing */
    padding: 10px;
    width: calc(100% + 2 * 10px);
    box-sizing: border-box;
    max-width: 6em;
    white-space: pre-wrap;
    
  border-radius: 8px;
  box-shadow: 0 2px 10px 0 #ccc;
}
.content {
  background: #eee;
  display: inline-block;
  white-space: pre;
  margin-left: 50px;
}
.content_small {
  margin-top: 100px;
}
.content_medium {
  padding-right: 1em; /* to emulate cells wider than the content */
}

<div class="content content_small" data-tooltip="some text">some text</div>
<div class="content content_medium" data-tooltip="some text">some text</div>
<div class="content content_large" data-tooltip="some larger text">some larger text</div>

这2行

width: calc(100% + 2 * 10px);
max-width: 7em;

用于控制工具提示的宽度。第一个应该抑制换行（不带换行，每个单词将换行），第二个是限制宽度。

此方法的问题是第一个方法基于元素的宽度，而不是data-tooltip的内容，并且因为.content_medium元素的工具提示比内容宽。因此，我正在寻找一种替代方法，该方法允许将工具提示的宽度调整为其内容，但直到达到宽度限制，然后才应使用换行符。

我想知道是否只有CSS才有可能，或者我必须使用JS。

您能提出这样的方法吗？