Многоточие на контейнере изменяемого размера (с разделением. js) - PullRequest
Новая
       33

Многоточие на контейнере изменяемого размера (с разделением. js)

0 голосов
/ 27 января 2020

Я использую разделение. js для управления разделенным видом, с "боковой панелью" слева и разделом справа.

enter image description here

<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>

Разделить. js сделать это возможным, но у меня возникают проблемы с многоточием на тексте на боковой панели. Я хотел бы иметь динамический c многоточие, я имею в виду текст, который усекается в соответствии с текущей шириной боковой панели, который может быть изменен пользователем.

Как этого достичь?

Вот моя игровая площадка для теста: https://codepen.io/smartm0use/pen/eYmoZXm

1 Ответ

1 голос
/ 27 января 2020

Вы можете использовать flex-боксы для достижения этого 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;
}
...