如何在flexbox容器中断线之前移除垂直管道

Question

我有一个下拉菜单容器，它使用flexbox进行样式设置。我在每个列表项之后都有一个竖管，并希望从换行之前的最后一个项中删除该竖管|&"；。

有任何css魔法可以实现这一点吗？

这里是中转站：https://myersbrierkelly.djykrmv8-liquidwebsites.com/

点击"；实践领域"；你会在下拉列表中看到它。

Answer 1

.navbar .dropdown-menu li:last-child::after {
content: '';
}

Answer 2

我最终不得不采用javascript方法，比较每个列表项的偏移量顶部，并在此基础上找到中断，然后添加一类wrapped。

var detectWrap = function(className) {

var wrappedItems = [];
var prevItem = {};
var currItem = {};
var items = document.getElementsByClassName(className);
for (var i = 0; i < items.length; i++) {
currItem = items[i].getBoundingClientRect();
if (prevItem && prevItem.top < currItem.top) {
wrappedItems.push(items[i]);
}
prevItem = currItem;
};

return wrappedItems;
}
window.onload = function(e){
var wrappedItems = detectWrap('menu-item-object-practice-area');
for (var k = 0; k < wrappedItems.length; k++) {
wrappedItems[k].className = "wrapped";
}
};

Answer 3

使用第n个子元素(n(选择不需要垂直管道的特定子元素，如

.navbar .dropdown-menu li:nth-child(4)::after, 
.navbar .dropdown-menu li:nth-child(7)::after, 
.navbar .dropdown-menu li:nth-child(10)::after {
content: "";
}

第n个子(n(选择器选择第n个子元素。