How can I hide specific elements if they do not fit the container?

Issue

given a navigation bar style container, which contains a list of buttons. The buttons contain an svg image as well as some text. The number of buttons may change at runtime and the text might as well due to i18n. This pretty much eliminates the possibility to just solve this with media queries.

big screen:

 ------------------------------------------
| --------------------    ---------------  |
||svg create new page |  | svg edit page | |
| --------------------    ---------------  |
 ------------------------------------------

when the screen gets smaller, an alternative shorter text should be used:

smaller screen:

 -------------------------------
| -----------    ----------     |
||svg create |  | svg edit|     |
| -----------    ----------     | 
 -------------------------------

and finally, when we can't even make this fit, only display the svg icon and no text:

 -------------------
| -----    -----    |
|| svg |  | svg |   |
| -----    -----    | 
 -------------------

I was using media queries to make this work previously, but as the more the buttons might change at runtime, this gets more and more complex and difficult. Is there some better way css would support something like this?

.buttons {
  whitespace: nowrap;
}

<div class="buttons">
  <button>
    <span>svg</span>
    <span class="long">
      create new page
    </span>
    <span class="short">
      create
    </span>
  </button>
    <button>
    <span>svg</span>
    <span class="long">
      edit page
    </span>
    <span class="short">
      edit
    </span>
  </button>
</div>

link to fiddle

Solution

The solution to this issue is called container queries. Not yet supported by browsers, but there are a few ways by using javascript to make it work.

There also are a couple of libraries available to take care of the heavy lifting - but that often depends on the framework being used.

Answered By - st-h