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

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？如果是这样怎么办？

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

原文由 twsaef 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是可能的 flex-box

该技术的关键：

• 容器元素设置为 overflow: hidden 。
• 在 ul （这是一个弹性盒子）上设置 justify-content: space-between 以强制其弹性项目拉伸到左右边缘。
• 在 margin-left: -1px ul 左边缘溢出容器。
• 在 li 弹性项目上设置 border-left: 1px 。

容器充当掩码，隐藏任何接触其左边缘的弹性项目的边界。

 .flex-list {
    position: relative;
    margin: 1em;
    overflow: hidden;
}
.flex-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -1px;
}
.flex-list li {
    flex-grow: 1;
    flex-basis: auto;
    margin: .25em 0;
    padding: 0 1em;
    text-align: center;
    border-left: 1px solid #ccc;
    background-color: #fff;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<div class="flex-list">
    <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>
</div>

原文由 gfullam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只是

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

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

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

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

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

text-overflow: '' '';

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

原文由 user663031 发布，翻译遵循 CC BY-SA 3.0 许可协议