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

我使用Split.js来管理一个拆分视图，左侧有一个“侧栏”，右侧有一个部分

Lorem ipsum dolor sit amet
1.
Lorem ipsum dolor sit amet
1.
Lorem ipsum dolor sit amet
1.
Lorem ipsum dolor sit amet
1.

js使这成为可能，但我遇到了侧边栏中文本省略号的问题。我希望有动态省略号，我的意思是文本根据边栏的当前宽度被截断，用户可以更改

如何做到这一点

---

这是我的测试场地：

您可以使用flex Box来达到以下目的：

---

您需要将内联元素转换为块元素：

。项文本：{display:block}是的，我看到它在操场上起作用，但在我的真实代码中不起作用。我的错。。。我将尝试更新操场。。。挂起…
.ui.checkbox:{width:100%}。ui.vertical.menu:{宽度：100%}我已经更新了代码笔：正如您所看到的，设置
宽度：100%
都可以使计数器div继续运行。即使没有
.ui.vertical.menu.item>上的CSS规则，它也可以在
.ui.vertical.menu>.label
和
.ui.vertical.menu
上工作。无论如何，非常感谢你！请添加一个答案，以便我可以接受！您是否看到，即使不为
.ui.vertical.menu
和
.ui.vertical.menu.item>设置规则，它也可以工作？好的，更好：）
<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>

.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;
}