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: "";
    }
}

你会看到这样的。

如果屏幕很宽

如果屏幕很窄

我的问题解释

正如您所看到的，“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: " | ";
    }

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

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

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

最后，我将<a>元素显示为inline-block，只是为了避免单行元素在两行上分割：

small a {
  display:inline-block;
}

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

Answer 2

此脚本在换行符后检测第一个子节点，并向其添加“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

Answer 3

有一个仅限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。

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

blog.html

CSSfile.scss

你会看到这样的。

我的问题解释

3 个答案: