如何在 CSS 中检测空格并删除分隔符

Question

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

blog.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>

CSSfile.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 类 |一级 | J 类 | K类

如果屏幕窄

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

我的问题说明

如您所见，“classF”（classC，classI also）旁边有分隔符，因为我在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: " | ";
    }

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

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

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

最后，我将<a> 元素显示为inline-block，以避免单个元素分成两行：

small a {
  display:inline-block;
}

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

Answer 2

有一个纯 CSS 的解决方案，但它只适用于左对齐的“列表”，而不适用于居中对齐的列表。我知道这不完全是 OP 所要求的，但我不想让大家知道。它是如此简单......它很漂亮;-)。

这个 HTML：

<div class="holder">
  <div class="inner">
    |&nbsp;classA
    |&nbsp;classB
    |&nbsp;classC
    |&nbsp;classD
    |&nbsp;classE
    |&nbsp;classF
    |&nbsp;classG
    |&nbsp;classH
    |&nbsp;classI
    |&nbsp;classJ
    |&nbsp;classK
  </div>
</div>

...连同这个CSS：

.holder {overflow: hidden;}
.inner {position: relative; left: -5px;}

查看working example。

Answer 3

此脚本在换行后检测到第一个孩子并向其添加一个类 'first'。

这是 SCSS：

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

    small {white-space: nowrap; display: inline-block;}
    small a {text-decoration: none;}
    small a::before {
        content: "| ";
        white-space: nowrap;
    }

    small:first-child a::before, small.first a::before {
        color: rgba(0,0,0,0);
    }
}

这是 jQuery：

$(window).on("resize", (function() {
  $('.blog-category small').removeClass('first');
  var top;
  $('.blog-category').children().each(function() {
    var $this = $(this),
        _top = $this.position().top;

    if (top === undefined) {
        top = _top;
    } else if (top < _top) {
        top = _top;
        $this.addClass('first');
    }
  });
}));

带有工作演示：https://codepen.io/anon/pen/xPZeOE