Расчет динамической ширины элементов списка
Мне нужно реализовать некоторые требования:
Динамически нарисуйте список элементов li, который может состоять из текста разной длины. Все элементы, которые должны отображаться в одной строке слишком долго, необходимо заменить на .... Я добился этого с помощью следующего CSS:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Обычно эта хлебная крошка состоит из 1-5 элементов. Первый и последний элементы всегда должны отображать полный текст.
Как я могу рассчитать максимальную ширину элементов li, не включая ширину последнего элемента? Что-то вроде:
calc((100% - width-last-element)/<li-el-qty>-1
Я пробовал следующее:
body {
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 1em;
background-color: rgb(227, 227, 227);
white-space: nowrap;
overflow: hidden;
}
/* Regular breadcrumbs */
ul {
list-style-type: none;
margin: 0;
padding: 2em;
color: #333;
}
li {
display: inline-block;
position: relative;
padding-right: 2em;
margin: 0;
text-decoration: none;
display: inline-block;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 8em;
}
li:after {
content: '>';
position: absolute;
display: inline-block;
right: 0;
width: 2em;
text-align: center;
}
li:nth-last-child(1) {
text-decoration: underline;
font-weight: bold;
text-overflow: clip;
overflow: visible;
}<ul class = "bread">
<li>MERSEDES</li>
<!--
-->
<li>Main transmission section1</li>
<!--
-->
<li>Second Transmissio Section</li>
<!--
-->
<li>Another to view</li>
<!--
-->
<li>Final link the hierarchy</li>
<!--
-->
<li>Current section viewAAAAA</li>
</ul>https://codepen.io/nolik/pen/mKpWYm
Я также пробовал настроить динамическую ширину в зависимости от количества таких элементов:
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
max-width: 33.3333%;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
max-width: 25%;
}
Но ни то, ни другое не помогло.
@HiddenHobbes отлично, спасибо! только одно => не могли бы вы посоветовать, как заставить все элементы рухнуть в равной пропорции?
Пожалуйста, проверьте ручку еще раз, это то, что вам нужно? codepen.io/anon/pen/KeZxMX
немного нет, первая версия ближе (просто с увеличением последнего элемента другие элементы схлопываются непропорционально, вы можете видеть: codepen.io/nolik/pen/mKpaGr (вы можете видеть, что максимальная ширина свернутого 1-го элемента отличается от 3d, логически 1-й элемент должен отображаться полностью) Но в любом случае вы мне очень помогли!
Что-то вроде этого? codepen.io/anon/pen/bKazox
Был ли предыдущий пример тем, чем вы были после @Nolik? Если да, то я могу написать полный ответ с объяснением изменений.
Спасибо, @HidenHobbes. Отправьте, пожалуйста, свой ответ, что я могу решить этот вопрос. на самом деле это большая помощь с гибкостью, теперь я пытаюсь настроить ваше решение для вырезания свободного пространства из элемента, который полностью отображается, и совместного использования этого пространства между другими элементами, которые мы переполняем.
Ответы 2
Я бы использовал display: flex для родительского элемента, а затем отключил бы min-width для последнего дочернего элемента. Быстрый пример:
body {
margin: 0;
}
.parent {
display: flex;
}
.parent>div {
min-width: 0;
}
p {
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.parent>div:last-of-type {
min-width: unset;
}<div class = "parent">
<div>
<p>MERSEDES</p>
</div>
<div>
<p>Final link the hierarchy</p>
</div>
<div>
<p>Another to view to view</p>
</div>
<div>
<p>Final link the hierarchy</p>
</div>
<div>
<p>Another to view to view</p>
</div>
<div>
<p>Final link the hierarchy</p>
</div>
</div>
<div class = "parent">
<div>
<p>MERSEDES</p>
</div>
<div>
<p>Final link the hierarchy</p>
</div>
<div>
<p>Another to view to view</p>
</div>
<div>
<p>Final link the hierarchy</p>
</div>
<div>
<p>Another to view to view</p>
</div>
<div>
<p>Final link the hierarchy</p>
</div>
<div>
<p>Another to view to view</p>
</div>
</div>
<div class = "parent">
<div>
<p>MERSEDES</p>
</div>
<div>
<p>Final link the hierarchy</p>
</div>
<div>
<p>Another to view to view</p>
</div>
<div>
<p>Final link the hierarchy</p>
</div>
<div>
<p>Another to view to view</p>
</div>
<div>
<p>Final link the hierarchy</p>
</div>
<div>
<p>Another to view to view</p>
</div>
<div>
<p>Final link the hierarchy</p>
</div>
</div>извините @Vucko, я не понимаю, как это должно работать без максимальной ширины в классе span. (codepen.io/pen)
@Nolik, только последний диапазон дочерних элементов не имеет свойства max-width, поэтому он может использовать всю ширину своего родительского элемента.
спасибо за ответ, но проблема в том, что мне нужно как-то динамически настроить максимальную ширину не последних дочерних элементов (все элементы должны пытаться полностью развернуться, за исключением случая, когда он блокирует отображение полностью последнего элемента)
@Nolik, теперь я получил то, что тебе нужно. Удаляю и перепубликую, если найду ответ.
извините, но похоже, что ваш пример работает по-другому: codepen.io/nolik/pen/qKpLOg, см. комментарий> Hidden Hobbes, это именно то, что мне нужно (только одна вещь, которую нужно достичь, это равная пропорция для всех свернутых элементов).
Вы можете достичь желаемого результата, используя flexbox и его свойства grow и shrink.
Потребуются следующие модификации:
- Добавьте
display: flex;вul. Это сделает его контейнеромflex. - Добавьте
flex: 0 1 10%;вli. Это скажетlis не расти, а сжиматься с начальной длиной10%. - Добавьте селектор
li:first-childс правиломflex: 0 0 auto;. Это гарантирует, что первыйliостанется в исходном размере и не сжимается. - Добавьте селектор
li:last-childс правиломflex: 1 0 auto;. Это гарантирует, что последнийliвырастет, чтобы заполнить доступное пространство.
body {
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 1em;
background-color: rgb(227, 227, 227);
white-space: nowrap;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 2em;
color: #333;
display: flex;
}
li {
position: relative;
padding-right: 2em;
margin: 0;
text-decoration: none;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 10%;
}
li:after {
content: '>';
position: absolute;
right: 0;
width: 2em;
text-align: center;
}
li:nth-last-child(1) {
text-decoration: underline;
font-weight: bold;
text-overflow: clip;
overflow: visible;
}
li:first-child {
flex: 0 0 auto;
}
li:last-child {
flex: 1 0 auto;
}<ul class = "bread">
<li>MERSEDES</li>
<li>Main transmission section1</li>
<li>Second Transmissio Section</li>
<li>Another to view</li>
<li>Final link the hierarchy</li>
<li>Current section viewAAAAA</li>
</ul>
Вы ожидаете такого результата? codepen.io/anon/pen/KeZxMX