javascript - 防止元素出现在行首或行尾

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
}