Add content after, but hide once it reaches next element

Asked Oct 09 '17 at 17:26

Active Oct 09 '17 at 20:06

Viewed 42 times

I have a flexbox and several divs inside, which should be justified as space-around. On the screenshot you can see that this is a part of table of contents of a book, but the problem is that because this is flexbox and because screens have different sizes, space between dots isn't constant.

My idea is to fill it with content after, so for example:

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

we will have something like this in styles for content after:

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

Is there a way to hide extra dots so it doesn't overlap once content after reaches next dot or page number?

edited Oct 09 '17 at 17:29

Asons

84,923
12
110
165

asked Oct 09 '17 at 17:26

Leonid Bor

2,064
6
27
47

We need to see a _working code snippet reproduce the issue_, not just a fragment. – Asons Oct 09 '17 at 17:29
duplicate? https://stackoverflow.com/questions/5476673/css-justify-text-fill-space-with-dots – Niles Tanner Oct 09 '17 at 17:32
Is there something missing in my answer I can add or adjust, for you to accept? ... or it simply didn't work? – Asons Oct 12 '17 at 13:42
Since I didn't got any response I deleted my answer. – Asons Oct 13 '17 at 15:21

Add content after, but hide once it reaches next element

0 Answers0