Добавьте содержимое после, но скройте, как только оно достигнет следующего элемента

У меня есть флексбокс и несколько дивов внутри, которые должны быть оправданы как space-around. На скриншоте видно, что это часть оглавления книги, но проблема в том, что из-за того, что это флексбокс и экраны разного размера, расстояние между точками непостоянно.

пример

Моя идея состоит в том, чтобы заполнить его контентом после, например:

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

Есть ли способ скрыть лишние точки, чтобы они не перекрывались, когда содержимое после достижения следующей точки или номера страницы?


html css flexbox
person Leonid Bor    schedule 09.10.2017    source источник
comment
Нам нужно увидеть фрагмент рабочего кода, воспроизводящий проблему, а не просто фрагмент.   -  person Ason    schedule 09.10.2017
comment
дубликат? stackoverflow.com/questions/5476673 /   -  person Niles Tanner    schedule 09.10.2017
comment
Есть ли что-то, чего не хватает в моем ответе, который я могу добавить или исправить, чтобы вы его приняли? ... или это просто не сработало?   -  person Ason    schedule 12.10.2017
comment
Поскольку я не получил никакого ответа, я удалил свой ответ.   -  person Ason    schedule 13.10.2017