Ellipsis on resizable container (with Split.js)

Question

I'm using Split.js to manage a splitted view, with a "sidebar" on the left and a section on the right.

<div id="c" class="split content">
  <div class="item">
    <span class="item-text">Lorem ipsum dolor sit amet</span>
    <span>1</span>
  </div>
  <div class="item">
    <span class="item-text">Lorem ipsum dolor sit amet</span>
    <span>1</span>
  </div>
  <div class="item">
    <span class="item-text">Lorem ipsum dolor sit amet</span>
    <span>1</span>
  </div>
  <div class="item">
    <span class="item-text">Lorem ipsum dolor sit amet</span>
    <span>1</span>
  </div>
</div>

Split.js make this possible but I'm experiencing problems with ellipsis on text in the sidebar. I would like to have dynamic ellipsis, I mean text that get truncated according to the current width of the sidebar, that can be changed by the user.

How to reach that?

Here is my playground for test: https://codepen.io/smartm0use/pen/eYmoZXm

Answer 1

You can use flex-boxes to reach this https://codepen.io/Satif/pen/jOERMWy:

.ui.vertical.menu {
  width: 100%;
}

.ui.vertical.menu .item.filter {
  white-space: nowrap;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.ui.vertical.menu .item>.label {
  float: none;
}