html - 如何检测 CSS 中的空格并删除分隔符

Question

我正在尝试使用 Jekyll 在我的博客中添加类别 View 。

博客.html

<div class="blog-category">
    {% assign categories_list = site.categories %}
        {% for category in categories_list %}
            <small>
                <a class="category" href="{{site.baseurl}}/categories/{{ category[0] | downcase }}.html">{{ category[0] | capitalize }}</a>
            </small>
        {% endfor %}
    {% assign categories_list = nil %}
</div>

CSS文件.scss

.blog-category {
    width: 80% !important;
    margin: auto;
    white-space: normal;
    text-align: center !important;
    word-spacing: 1.5em;

    small::before {
        content: " | ";
    }

    small:first-child::before {
        content: "";
    }
}

你会看到这样的。

如果屏幕很宽

A类| B类| C类| D 类 | E类| F级 |
G类| H 类 | I 类 | J 类 | K级

如果屏幕很窄

A类| B类| C类|
D 类 | E类| F级|
G类| H 类 | I 类 |
J 类 | K级

我的问题解释

正如你所看到的，“classF”(classC、classI也)旁边有分隔符，因为我在css文件中通过编码 content: "| "; 放置了分隔符“| ”。 我想做的是在有空格时删除分隔符(实际上是换行符)。

请帮我解决我的问题:(

Answer 1

我想不出任何方法可以用纯 CSS 解决这个问题。

我尝试过这样的方式:

$(window).on("resize", (function() {
    var isLast = false;
    $("a").removeClass("Last")
    $("a").each(function() {   
        if (isLast && isLast.offset().top != $(this).offset().top) {
            isLast.addClass("Last");
        } 
        isLast = $(this);
    }).last().addClass("Last");
})).resize();

其思想是迭代每个元素以检查前一个元素是否在同一行，如果不是，则前一个元素是该行的最后一个；在这种情况下，添加了一个新类“Last”。 “Last”类设置为:

.Last:after {
  content: "";
}

其中 <a>元素是:

small a:after {
        content: " | ";
    }

此外，我将调整大小事件绑定(bind)到窗口对象，然后 .resize()立即调用它 onload。 当然，最后的操作对于更改窗口大小的响应目的很重要。

我简化了你的代码，只是为了加快速度，但你无论如何都能够弄清楚如何适应你的代码......

http://jsfiddle.net/9z2ug5oj/1/

最后，我会显示 <a>元素为inline-block ，只是为了避免单个元素分成两行:

small a {
  display:inline-block;
}

http://jsfiddle.net/9z2ug5oj/2/