CSS：元素在破坏单词之前应该达到最大宽度

Question

有CSS工具提示（下面给出了codepen）。他们有CLUSTERED和min-width。它们有时包含短语，有时包含很长的单词而没有中断。如果max-width =＆gt;会发生这种情况。简短的工具提示是完美呈现的，但显然，长的工具提示不会被包裹，也不会完全可见：

当我添加white-space: nowrap和white-space: normal =＆gt;时会发生这种情况。在进入word-break: break-word：

之前，现在很短的和长的很快就被包裹了

我想要达到的目标是： 在达到最大宽度之前，工具提示不会换行。只有当他们没有进入最大宽度时才开始包装。像这里：

是否可以使用CSS（没有javascript）来获取此行为？

以下是codepen：https://codepen.io/anon/pen/bWXobM （取消注释第58-59行以改变行为。）

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

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

Answer 1

不要使用word-break: break-word，因为它会将每个字断开到新行，而是使用overflow-wrap: break-word;和white-space: normal。

Answer 2

我在css代码中做了一些更改。我评论了我已更改的行。（例如.changed）。实际上你已经使用

制作了半解决方案

word-break: break-word;

我唯一改变的是最小宽度和最大宽度，以达到所需的效果。

这是更新后的链接

https://codepen.io/anon/pen/ZyGpaL

Answer 3

我遇到了类似的问题，并且能够使用包装元素以所需的方式对其进行样式设置。我分叉了先前的答案的密码笔，并根据我假设您想要的东西使它起作用：https://codepen.io/anon/pen/BONWGG

关键的变化是为[data-tooltip]创建了一个新元素，为它赋予了列弹性，并让::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;
      ...
    }
  }
}