Add Dot after each item unless last on the line

Question

Ive got a word cloud kind of design that im looking to code, but struggling on how to get it working how id like.

Word 1   •   Word 2   •   Word 3   •   Word 4

Word 5   •   Word 6   •   Word 7

Word 8   •   Word 9   •   Word 10   •   Word 11

You see how the dot only appears after an item when its not last in line.

This will be dynamic, I will not know how many words are on a line, this will depend on the length of the words.

.word-cloud {
  width: 400px;
  display:flex;
  flex-wrap: wrap;
  gap: 16px;
}
.word-cloud span {
  display:flex;
  gap: 16px;
}
.word-cloud span:not(:last-child)::after {
  content: "·";
  display: block;
}

 <div class="word-cloud">
    <span>Word 1</span>
    <span>Word 2</span>
    <span>Word 3</span>
    <span>Word 4</span>
    <span>Word 5</span>
    <span>Word 6</span>
    <span>Word 7</span>
    <span>Word 8</span>
    <span>Word 9</span>
    <span>Word 10</span>
    <span>Word 11</span>
</div>

This is what I currently have, but cant figure out a way to hide the dot after the last item of each line.

score 0 · Answer 1 · answered Dec 06 '22 at 09:35

Using the :nth-child(n) selector can do the trick. So the :nth-child(n) selector matches every element that is the nth child of its parent.

Here I added .word-cloud span:nth-child(4n) which means every 4th span element that is a child of the element with word-cloud as class name. Now depending on your case you can change the number in the property to match the number of words that will be in your line. For more information you can have a look here.

Hope that helps.

.word-cloud {
  width: 400px;
  display:flex;
  flex-wrap: wrap;
  gap: 16px;
}
.word-cloud span {
  display:flex;
  gap: 16px;
}
.word-cloud span:not(:last-child)::after {
  content: "·";
  display: block;
}

.word-cloud span:nth-child(4n):after{
    content: "";
 }

 <div class="word-cloud">
    <span>Word 1</span>
    <span>Word 2</span>
    <span>Word 3</span>
    <span>Word 4</span>
    <span>Word 5</span>
    <span>Word 6</span>
    <span>Word 7</span>
    <span>Word 8</span>
    <span>Word 9</span>
    <span>Word 10</span>
    <span>Word 11</span>
</div>

Hi Coolis, The problem I have is I don't no how many items will be on each line, that will be determined by the length of the words. so this doesn't really work for my needs, Thank you though, — ltjfansite, Dec 06 '22 at 09:58

Add Dot after each item unless last on the line

1 Answers1