可调整大小容器上的省略号（Split.js）

Question

我正在使用 Split.js 来管理拆分视图，左侧有一个 "sidebar"，右侧有一个部分。

<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 使这成为可能，但我在边栏中的文本上遇到省略号问题。我想要动态省略号，我的意思是根据侧边栏的当前宽度截断的文本，可以由用户更改。

如何实现？

这是我的测试场地：https://codepen.io/smartm0use/pen/eYmoZXm

Answer 1

您可以使用 flex-boxes 来实现 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;
}

可调整大小容器上的省略号（Split.js）

Ellipsis on resizable container (with Split.js)

javascript

ellipsis

split.js