之后添加内容，但一旦到达下一个元素就隐藏

Question

我有一个flexbox和几个div，应该被称为space-around。在屏幕截图中，您可以看到这是一本书的目录的一部分，但问题是因为这是flexbox并且因为屏幕具有不同的大小，所以点之间的空间不是恒定的。

我的想法是在之后填写内容，例如：

<div class="myflexbox">
  <div class="dot">.</div>
  <div class="dot">.</div>
  <div class="dot">.</div>
  <div class="pagenumber">.1160</div>
</div>

我们将在以下内容的样式中使用以下内容：

.dot:after {
  content: "..................."; //millions of dots
}

有没有办法隐藏额外的点，以便在到达下一个点或页码后内容不会重叠？