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

不要使用 word-break: break-word，因为它会将每个单词换行，而是使用 overflow-wrap: break-word; 和 white-space: normal.

Answer 2

我在 css 中做了一些更改 code.I 评论了我更改的行。（例如 //changed）。实际上，您已经使用 [= 完成了一半的解决方案12=]

word-break: break-word;

我唯一更改的是 min-width 和 max-width 以获得所需的结果。

这是更新后的 link

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;
      ...
    }
  }
}

CSS: 元素在断词前应该达到最大宽度

CSS: element should get max-width before breaking words

css

tooltip

word-break