防止在行

Question

我有一个div，其中包含许多标记元素。每个标记之间还有另一个元素，它包含一个管道符号作为分隔符。包含div中的标签数量是动态的。

偶尔会有很多标签包含在第二行，这是所需的行为。但是，这意味着在第一行的末尾或第二行的开头有一个管道元素（取决于第一行的最后一个标记的宽度），即

实际行为

[  TAG 1  ] | [  TAG 2  ] | [  TAG 3  ] |
[  TAG 4  ] | [  TAG 5  ] |

或

[  TAG 1  ] | [  TAG 2  ] | [  TAG 3  ]
| [  TAG 4  ] | [  TAG 5  ] |

第二个例子特别令人恼火，因为每行开头的标签错位

所需行为

[  TAG 1  ] | [  TAG 2  ] | [  TAG 3  ]
[  TAG 4  ] | [  TAG 5  ] |

如何最好地实现这一目标。从逻辑上讲，我可以使用JS迭代标记元素，如果一个标记的Y位置与前一个标记不同，我会删除标记的前一个管道。

还有其他更快，更少手动的方式吗？感谢。

Answer 1

由于它取决于渲染，您只能将它们全部添加到它们所包裹的位置（高度改变，如您所想）移除管道。

在打开管道时，您还需要将管道放回去。您还需要在删除管道的位置添加换行符以避免出现问题。

$(window).resize(function() {
  var pipe = '<span class="pipe"> | </span>';
  var y = 0;
  $('.tag').each(function() {
    var $tag = $(this);
    $tag.prev('.br').replaceWith(pipe);
    var top = $tag.offset().top;
    if (top > y) {
      y = top;
      // Remove any previous pipe as we are on a new line
      // Replace it with a line break
      $tag.prev('.pipe').replaceWith('<br class="br"/>');
    }
  }).last().next('.pipe').remove();
}).resize();

JSFiddle： https://jsfiddle.net/5ounv84q/2/

您可以调整页面大小以查看效果。

注意：正如您所示，标记可以包裹2行，除非您将它们设置为不允许空格分隔。

.tag {
  white-space: nowrap
}

Answer 2

$(function() {
    var lastElement = false;
    $(".elt").each(function() {
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            $(lastElement).next().addClass("no-separator");
        }
        lastElement = $(this);
    });
});

.elt,
.separator {
    display: inline-block;
}
.elt {
    width: 200px;
    background-color:red;
}
.no-separator {
    display: none;
    /*Or (depenmding on what you want) : visibility: hidden;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elt">1</div>
<div class="separator"> | </div>
<div class="elt">2</div>
<div class="separator"> | </div>
<div class="elt">3</div>
<div class="separator"> | </div>
<div class="elt">4</div>
<div class="separator"> | </div>
<div class="elt">5</div>
<div class="separator"> | </div>