CSS: element should get max-width before breaking words

Question

There are CSS tooltips (codepen is given below). They have min-width and max-width. They contain sometimes short phrases, sometimes very long words without breaks. This is what happens if there is white-space: nowrap => Short tooltips are rendered perfectly, but long ones, obviously, are not wrapped and are not fully visible:

This is what happens when I add white-space: normal and word-break: break-word => Now short ones and long ones get wrapped long before getting to the max-width:

What I would like to achieve is: Tooltips don't wrap before getting to the max-width. And start wrapping only if they don't get into the max-width. Like here:

Is it possible to get this behaviour just with CSS (no javascript)?

Here is the codepen: https://codepen.io/anon/pen/bWXobM (Uncomment lines 58-59 to change the behaviour.)

I didn't manage to achieve this with any of the found solutions. If you know how to apply them in this case, please share!

Update: apparently some kind of solution to this problem has just been added to the wg draft: https://github.com/w3c/csswg-drafts/issues/1171. It is still interesting if someone found a workaround for now.

Answer 1

I had a similar problem, and was able to use a wrapping element to style it the way I wanted. I forked a previous answer's codepen and got it to work based on what I am assuming you wanted: https://codepen.io/anon/pen/BONWGG

the key changes were creating a new element for the [data-tooltip], giving it column flex, and letting the ::after element scale as big as it needs to

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