檢測無序列表中的換行符

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/