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>

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

1 个答案: