Отзывчивый разделитель для горизонтального списка

Question

Этот вопрос расшифровывается по 'Separators For Navigation', спрашивая, как можно удалить разделители при разрыве линии из-за размера видового экрана.

Широкого Viewport

->  Item 1 | Item 2 | Item 3 | Item 4 | Item 5  <- 

Малый Viewport

-> Item 1 | Item 2 | Item 3 <- 
->  Item 4 | Item 5  <- 

Вот скрипка, которая показывает, как труба остается на прорыве линии:

Fiddle.

Меня интересует только css-решение, но javascript является приемлемым, если он предоставляет единственно возможное решение.

Answer 1

Вы можете использовать тот факт, что задние и линию автоматически трейлинг белого пространства рушится: https://jsfiddle.net/vnudrsh6/7/

nav { 
 
    text-align: center; 
 
    padding-right: 1em; /* = li::after@word-spacing */ 
 
} 
 
ul { 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
    display: inline; 
 
    /* white-space: nowrap should be moved to child A because IE fails to wrap resulting list completely */ 
 
} 
 
li::before { 
 
    content: ' '; 
 
    /* 
 
    this content is important only for Crome in case the HTML will be minified with no whitespaces between </li><li> 
 
    */ 
 
} 
 
li::after { 
 
    content: ' '; 
 
    white-space: normal; 
 
    word-spacing: 1em; /* = nav@padding-right - this actually makes width */ 
 
    background-image: radial-gradient(circle, black, black 7%, transparent 15%, transparent 35%, black 45%, black 48%, transparent 55%); 
 
    background-size: 1em 1em; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    opacity: 0.5; 
 
} 
 
/* 
 
no need to unset content of li:last-child, because it will be the trailing whitespace so it will collapse 
 
*/ 
 
a { 
 
    white-space: nowrap; /* here */ 
 
    display: inline-block; /* to allow padding */ 
 
    padding: 1em; 
 
    text-decoration: none; 
 
    color: black; 
 
    transition-property: background-color; 
 
    transition-duration: 500ms; 
 
} 
 
a:hover { 
 
    background-color: #ccc; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li><li><a href="#">Item 6</a></li><li><a href="#">Item 7</a></li><li><a href="#">Item 8</a></li><li><a href="#">Item 9</a></li><li><a href="#">Item 10</a></li><li><a href="#">Item 11</a></li><li><a href="#">Item 12</a></li><li><a href="#">Item 13</a></li><li><a href="#">Item 14</a></li><li><a href="#">Item 15</a></li><li><a href="#">Item 16</a></li><li><a href="#">Item 17</a></li><li><a href="#">Item 18</a></li><li><a href="#">Item 19</a></li><li><a href="#">Item 20</a></li> 
 
    </ul> 
 
</nav> 
 
<p>(Content)</p>

Это проверка концепции использует фоновое изображение из «в конечном счете colapsing» CSS контент пространства после каждого <li>. Протестировано в текущих Firefox, Chrome и IE11.

Answer 2

Если у вас есть статическая ширина элемента, вы можете рассчитать по медиа-экрану. Если не использовать скрипт

body { 
    text-align: center; 
} 

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

li { 
    display: inline-block; 

    &:not(:last-child):after { 
    content: ' |'; 
    } 
} 
@media screen and (max-width: 265px) { 
    li { 
    display: inline-block; 

    &:not(:last-child):after { 
    content: ''; 
    } 
} 

} 

Answer 3

Хороший вопрос. Для жизни я не могу думать о водонепроницаемом решении только для CSS. Я боюсь ...

Я изменил старое решение аналогичного вопроса, которое было опубликовано некоторое время назад: CSS: Last element on line. Как ни странно, я искал решение другой проблемы, которую у меня было некоторое время назад, и наткнулся на нее - с тех пор был отмечен!

Вот скрипку с моими обновлениями: https://jsfiddle.net/u2zyt3vw/1/

HTML:

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul> 

CSS:

body { 
    text-align: center; 
} 

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

li { 
    display: inline-block; 

    &:not(:last-child):after { 
    content: ' |' 

    } 

} 
li.remove:after { 
    content: none; 
} 

JQuery:

$(window).on("resize", function() { 
    var lastElement = false; 
    $("ul > li").each(function() { 
     if (lastElement && lastElement.offset().top != $(this).offset().top) { 
      lastElement.addClass("remove"); 
     } 
     lastElement = $(this); 
    }).last().addClass("remove"); 
}).resize(); 

Примечание - она ​​лучше всего работает onload на данный момент, изменение размера вызывает несколько проблем, даже если я использую toggleClass(). Поэтому продолжайте нажимать «Запуск» при каждом изменении размера представления. Я поработаю над этим и вернусь к вам.

Answer 4

Другое решение от этого же CSS: Last element on line похоже, что оно будет работать здесь.

HTML:

<div> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
<li>Item 5</li> 
</ul> 
</div> 

CSS:

div {overflow: hidden; margin: 1em; } 
div ul { list-style: none; padding: 0; margin-left: -4px; } 
div ul li { display: inline; white-space: nowrap; } 
div ul li:before { content: " | "; } 

(Fiddle)

Answer 5

Моя реализация с JavaScript: https://jsfiddle.net/u2zyt3vw/5/

Hit "Run" снова после того, как вы изменили размер окна.

Вы также можете добавить прослушиватели событий, такие как onresize. Вот JS:

var listItems = document.getElementsByTagName("li"); 
var listItemsWidth = []; 
var listItemsDistance = []; 

for (let i = 0; i < listItems.length; i++) { 
    listItemsWidth[i] = listItems[i].offsetWidth; 
    listItemsDistance[i] = listItems[i].getBoundingClientRect().right; 
} 

for (let i = 0; i < listItems.length; i++) { 
    if (listItemsDistance[i] == Math.max.apply(null, listItemsDistance)) { 
    listItems[i].classList -= "notLast"; 
    } else { 
    listItems[i].classList = "notLast"; 
    } 
} 

Я добавил notLast класс для всех ваших элементов, и это то, что содержит :after псевдо-элемент с трубой. Этот скрипт удаляет этот класс из тех, которые находятся ближе к правому краю контейнера.

Я также испортил псевдоэлемент и сделал его position:absolute; по темным причинам.