CSS:元素应该在断词之前获得最大宽度

Question

有 CSS 工具提示(下面给出了 codepen)。他们有 min-width和 max-width .它们有时包含简短的短语，有时包含没有中断的很长的单词。如果存在 white-space: nowrap，就会发生这种情况=> 短工具提示完美呈现，但长工具提示显然没有包裹并且不完全可见:



当我添加 white-space: normal 时会发生这种情况和 word-break: break-word => 现在短的和长的在到达 max-width 之前被包裹了很长时间:



我想实现的是:
工具提示在达到最大宽度之前不会换行。并且只有当它们没有进入最大宽度时才开始包装。像这儿:



是否可以仅使用 CSS(无 javascript)来获得这种行为？

这是代码笔:https://codepen.io/anon/pen/bWXobM
(取消注释第 58-59 行以更改行为。)

我没有设法使用任何找到的解决方案来实现这一目标。如果您知道如何在这种情况下应用它们，请分享!

更新:显然这个问题的某种解决方案刚刚添加到工作组草案中:https://github.com/w3c/csswg-drafts/issues/1171 .如果有人现在找到了解决方法，这仍然很有趣。

Answer 1

我遇到了类似的问题，并且能够使用包装元素按照我想要的方式对其进行样式设置。我 fork 了以前答案的代码笔，并根据我假设您想要的内容使其工作:https://codepen.io/anon/pen/BONWGG

关键的变化是为 [data-tooltip] 创建了一个新元素。 ，给它列 flex，并让 ::after元素比例尽可能大

<span class="tooltip-container">
  Tooltip 1 should be on 1 line
  <span data-tooltip="Short"></span>
</span>

[data-tooltip] {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  flex-direction: column;
  align-items: center;
  &::after {
    ...
    flex-shrink: 0;
  }
}
.tooltip-container {
  ...
  &:hover {
    [data-tooltip] {
      display: flex;
      ...
    }
  }
}