检测无序列表中的换行符

Question

关于使用：before或：after在列表项之间插入分隔符的水平无序列表。

我已经辞职自己发现以一定间隔列表的子项是否已断成另一条线检查，而且比较满意的，至少在名单上我的调整点向右看。

但是，这是一个短视的解决方案 ，因为只要我的客户想要更改任何给定孩子的内容，就会出现问题。 相当繁琐的工作：\\当决定切换到不同的分隔符时，问题变得更加复杂，因为包含这些列表之一的每个页面都嵌入了自定义CSS，因此也需要进行更改。 长话短说，我几乎放弃了保持清洁的努力。

编辑：

明确地说，问题在于（我知道）CSS中没有明确的方法来检测列表中的换行符。 如果在列表项之间插入分隔线，并且列表分成新行，则第一行的最后一项将留在最后，而分隔线则悬在末端。 不雅观。 我以前能够解决的唯一其他方法是使用CSS中的调整点，但这并不是理想的解决方法，因为如果列表完全改变，则必须返回并重新检查调整点。

EDIT2：

附上图片以帮助阐明意图

Answer 1

今天，我想出了一个令我非常满意的解决方案，所以我想为后代而分享它，以防万一其他人也遇到类似的问题。 我对其他任何人都想出的解决方案也非常感兴趣，尤其是如果解决方案仅适用于CSS。

CSS：

.classname {
    padding-left:0;
}
.classname.centered {
    text-align:center;
}
.classname.left {
    text-align:left;
}
.classname li {
    display:inline;
    margin:0;
    padding:0;
    white-space: nowrap;    
}
.classname li:not(.last-on-line):not(:last-of-type):after {
    content:"|";
    margin:0 0.25em 0 0.45em;
}

.classname.centered li:first-of-type,
.classname.centered li.first-on-line {
    padding-left:0.8875em;
}

.classname.centered li:last-of-type,
.classname.centered li.last-on-line,
.classname.left li:last-of-type,
.classname.left li.last-on-line {
    padding-right:0.8875em;
}

JS：

function determineListLineBreak() {
    //..
    var matchingDisplayTypes = ['inline','inline-block'];
    //..
    $('ul').each(function() {
        //..
        var listParent = this;
        //..
        if ($(this).hasClass('classname') == true && $(this).find('li').length > 1) {
            //..
            if ($.inArray($(this).find('li').css('display'), matchingDisplayTypes) > -1) {
                //..
                var listItems = $(this).find('li'),
                    listItemCount = $(this).find('li').length,
                    listItemLoopCount = 0;
                //..
                $(listItems).each(function() {
                    //..
                    listItemLoopCount = listItemLoopCount + 1;
                    //..
                    $(this).removeClass('first-on-line').removeClass('last-on-line');
                    //..
                    if (listItemLoopCount == listItemCount) {
                        //..
                        $(listItems).each(function() {
                            //..                    
                            var listItem = this;
                            //..
                            var itemToCompare,
                                compareDirection;
                            //..
                            if ($(listItem).next().length) {                        
                                itemToCompare = $(listItem).next(),
                                compareDirection = 'next';
                            }
                            else {
                                itemToCompare = $(listItem).prev(),
                                compareDirection = 'prev';
                            }
                            //..
                            if ($(listItem).offset().top != $(itemToCompare).offset().top) {
                                //..
                                if (compareDirection == 'next') {
                                    $(listItem).addClass('last-on-line');
                                    $(itemToCompare).addClass('first-on-line');
                                }
                                else {
                                    $(listItem).addClass('first-on-line');
                                    $(itemToCompare).addClass('last-on-line');
                                }
                            }
                        });
                    }
                });
            }
        }
    });
}

$(document).ready(function() {
    determineListLineBreak();
});

$(window).resize(function() {
    setTimeout(determineListLineBreak, 0)
});

HTML：

<ul class="classname left">
    <li>This is a list item</li>
    <li>This is another list item</li>
    <li>An item?</li>
    <li>Yes.</li>
    <li>Are we done?</li>
    <li>This is getting boring</li>
</ul>
<ul class="classname centered">
    <li>This is a list item</li>
    <li>This is another list item</li>
    <li>An item?</li>
    <li>Yes.</li>
    <li>Are we done?</li>
    <li>This is getting boring</li>
</ul>

对那些需要它的人的解释：

我所做的只是测量到每个列表项到页面顶部的距离，然后比较列表项和紧接其之前的列表项的测量值。 如果距离不同，则会在换行之前在列表项中添加一个类（对于可能需要的人，我还包括在列表项中添加一个类以开始新行）。 CSS负责其余的工作。

感谢您的阅读，希望对您有所帮助！

编辑：

因此我发现，当您接近打破界限时，有时您会看到边缘的项目同时属于这两个类别，并且该项目也不应再最后具有“最后一个类别”。 我认为这与分隔符占用的空间“消失”有关，从而使本应转到下一行的内容又可以“返回”。

我现在使用的解决方法似乎有点多。 我觉得这应该更容易些，我只是想念它。 第一次检查时，我没有给予足够的关注（调整大小的速度不够慢），但是现在添加的JS / CSS似乎已经非常完善。 如果我确实尝试过，我仍然可以打破它，以便可以使用一些帮助，或者如果有人有更好的解决方案，我将不胜感激。

EDIT2：

因此，事实证明这也可能被破坏，我将不得不继续努力。如果您不是超级挑剔的人，这将使您接近。 现在对我来说足够好

EDIT3：

我对代码进行了更多编辑，以修复某些问题并包括左对齐的方向。

小提琴 http://jsfiddle.net/u5uzg02w/