Bullet Separated Paragraph Without Bullets At End Of Line

Question

I'm looking for a way to make what I would call a "bullet separated paragraph list" using a javascript array of strings. Example:

item • item • item • item • item
    item • item • item • item
item • item • item • item • item

I can, of course, loop through these, adding bullet points after all but the last item, but I need to make sure that the bullet points don't appear at the end of a line, especially when the page is resized. Would I have to re-render the element every time the page is resized or is there a better strategy?

Answer 1

You can set your unordered list to display flex and have the list items set to flex start. The items will then be listed one after the other inline. Add flex-wrap to wrap to the next line. If you remove the left padding from the list, the left most items will have their bullets hidden. You can set the right margin of your list item to space the items however you want:

.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>