How to collapse an element if it doesn't fit?

Question

css

<parent>
  <title />
  <button />
</parant>

The button element is a button with an icon and text

How to hide the text if the title replaces the button, leaving only the icon

Tried to play with width, but this can only achieve a decrease in the width of the button, thereby cropping the text, but you need to delete it completely

Answer 1

Achieved approximately the desired effect by adding
button {
white-space: pre-line;
}
button:before {
content: '';
display: inline-block
}
In this case, if the text does not fit in the button, it moves to the next line, which is overflow: hidden
It seems to work, but not as we would like
It looks more like a crutch