项目符号分隔的段落，行尾没有项目符号

Question

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

项目 • 项目 • 项目 • 项目 • 项目
  项目 • 项目 • 项目 • 项目
项目 • 项目 • 项目 • 项目 • 项目

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

Answer 1

您可以将无序列表设置为显示 flex，并将列表项设置为 flex start。然后，这些项目将一个接一个地列出。添加 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>