4

有 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 行以更改行为。）

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

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

4

3 回答 3

2

我遇到了类似的问题，并且能够使用包装元素按照我想要的方式对其进行样式设置。我分叉了先前答案的 codepen 并根据我假设你想要的让它工作：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;
      ...
    }
  }
}
于 2018-08-22T20:39:23.783 回答
1

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

于 2017-06-06T15:36:08.503 回答
0

我在css代码中做了一些改变。我已经评论了我改变的行。（例如。//改变）。实际上你已经通过使用做了一半的解决方案 

word-break: break-word;

我唯一改变的是 min-width 和 max-width 以达到所需的结果。

这是更新的链接

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

于 2017-06-06T15:40:18.287 回答