在无序列表中的项目后面添加管道分隔符，除非该项目是一行中的最后一个

是否可以设置此 html 的样式...

<ul>
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>Tigers</li>
    <li>Zebras</li>
    <li>Giraffes</li>
    <li>Bears</li>
    <li>Hippopotamuses</li>
    <li>Antelopes</li>
    <li>Unicorns</li>
    <li>Seagulls</li>
</ul>

... 像这样 ...

...无需向特定列表项添加类，或诉诸 JavaScript？如果是的话怎么办？

换行符不固定；列表会变宽以占用额外的空间，并且列表项居中对齐。

Just

li + li::before {
    content: " | ";
}

当然，这并不能真正解决OP的问题。他想根据行的断开位置来消除行首和行尾的竖线。我会断言这个问题无法使用 CSS 解决，甚至使用 JS 也无法解决，除非有人想从本质上重写浏览器引擎的文本测量/布局/换行逻辑。

据我所知，唯一“了解”换行的 CSS 部分首先是::first-line伪元素，这对我们没有帮助——无论如何，它仅限于一些表示属性，并且不能与 ::before 和 ::after 之类的东西一起使用。我能想到的 CSS 唯一在某种程度上暴露换行的其他方面是连字符。然而，连字符是关于adding在某些情况下，在行尾添加一个字符（通常是破折号），而这里我们关心的是removing一个字符（垂直线），所以我只是看不到如何应用任何类型的连字相关逻辑，即使借助诸如hyphenate-character.

我们有word-spacing属性，该属性应用于行内，但不适用于行开头和结尾，这看起来很有希望，但它定义了单词之间的空格宽度，而不是要使用的字符。

有人想知道是否有某种方法可以使用text-overflow属性，它具有鲜为人知的能力，可以采用两个值来显示左侧和右侧的溢出文本，如下所示

text-overflow: '' '';

但似乎仍然没有任何明显的方法可以从 A 地到达 B 地。