這個問題是對“導航分隔符”的擴展，它詢問如何在視口大小引起的換行符處刪除分隔符。

寬視窗

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

小視窗

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

這是一把小提琴，展示了一根管子如何留在斷線處:

瞎搞。

我對只有css的解決方案感興趣，但是如果javascript提供了唯一可能的解決方案，它也是可以接受的。

您可以利用尾隨空格和行尾空格會自動折疊的事實:

document.write(
 'word<b style="background: red; outline: 1px solid blue;"> </b>'
 .repeat(42)
);

來自同一CSS的不同解決方案:行中的最后一個元素似乎在這里也能工作。

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: " | "; }

(小提琴)

如果你有你的元素的靜態寬度，你可以通過媒體屏幕來計算。 如果不使用腳本

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: '';  
  }
}

}

問得好。對我來說，恐怕我想不出一個防水的僅使用CSS的解決方案...

我修改了一個類似問題的舊解決方案:CSS:最后一行元素。有趣的是，不久前我正在尋找另一個問題的解決方案，無意中發現了這個——從那以后就被收藏了！

這里有一個撥弄我的更新: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();

注意——目前在加載時效果最好，即使我使用toggleClass()，調整大小也會引起一些問題。因此，每次調整視圖大小時，請一直按“運行”鍵。我會繼續努力，然后給你回復..

我的JavaScript實現:https://jsfiddle.net/u2zyt3vw/5/

調整窗口大小后，再次點擊“運行”。

您還可以添加事件偵聽器，如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；出于陰暗的原因。