html - 在无序列表中的元素之后添加竖线分隔符，除非该元素是一行中的最后一个

Question

是否可以设置此 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？如果是这样的话？

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

Answer 1

只是

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

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

据我所知，唯一“知道”换行的 CSS 片段首先是 ::first-line 伪元素，它在这里对我们没有帮助- - 在任何情况下，它都仅限于一些表示属性，并且不能与::before 和::after 之类的东西一起使用。我能想到的 CSS 的唯一另一个在某种程度上暴露换行符的方面是连字符。然而，断字就是在某些情况下添加一个字符(通常是破折号)到行尾，而这里我们关心的是删除一个字符(竖线) ), 所以我看不出如何应用任何类型的连字相关逻辑，即使借助 hyphenate-character 等属性也是如此。

我们有 word-spacing 属性，它应用于行内而不是行首和行尾，这看起来很有希望，但它定义了单词之间的空间宽度，而不是字符(s) 被使用。

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

text-overflow: '' '';

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