javascript - 行尾没有元素符号的元素符号分隔段落

Question

我正在寻找一种使用 javascript 字符串数组 制作我称之为“元素符号分隔的段落列表” 的方法。示例:

元素•元素•元素•元素•元素
元素•元素•元素•元素
元素•元素•元素•元素•元素

当然，我可以循环遍历这些，在最后一项之外添加元素符号点，但是我需要确保元素符号点不会出现在行尾，尤其是在调整页面大小时。每次调整页面大小时我都必须重新呈现元素还是有更好的策略？

Answer 1

您可以将无序列表设置为 flex 显示，并将列表项设置为 flex 启动。然后这些元素将一个接一个地内联列出。添加 flex-wrap 以换行到下一行。如果您从列表中删除左边的填充，最左边的元素将隐藏它们的元素符号。您可以设置列表项的右边距以根据需要分隔元素:

.wrap {
  overflow-x: hidden;
}

ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 0px;
}

li {
  margin-right: 40px;
}

<div class="wrap">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>