Скажите, у меня есть следующий путь:
Главная / Папка 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? Или, если вам известна какая-либо библиотека, которая этого добивается, пожалуйста, дайте мне знать.