说我有以下路径：
主页/文件夹1 /文件夹2非常长的名称/文件夹3 /文件夹4
我想做的是根据路径的长度弯曲收缩路径的每个部分。例如，我想按比例缩小“ 文件夹2非常长的名称”。
我在此处附加了一个示例jsfiddle：https://jsfiddle.net/carinquiryad/utcp4x59/12/。
.single-breadcrumb-wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 0 auto;
flex-shrink: 1000;
display: inline-block;
padding: 10px 5px 15px 0;
border-bottom: 1px solid transparent;
color: var(--main-color);
position: relative;
}
如果在这里注意到，最后一个路径很长，因此除了“ ...”部分外，其他一些中间文件夹未显示。请忽略悬停方面，目前我只对基本视图感兴趣。可以想象，这只是一个例子，我们的实际内容是动态的，各个部分可以任意长度。
关于如何使用CSS实现此目标的任何想法？或者，如果您知道可以达到此目的的任何图书馆，请告诉我。