Dot leaders to span over two lines

Question

I am trying to create a responsive taxonomic key using dot leaders, I have got it pretty much perfect except when resizing the browser some text to the right of the leader has a greater than the remaining space so it jumps to the next line leaving an empty white space where it previously was. I would like to have dots extending to fill in this white space.

e.g. dots between 'spines' and 'Scomberomorus' see:

This is what I have:

This is what I want:

Apologies for mistakes I'm a beginner.

.ol {
  list-style-position: outside;
}

.list li {
  position: relative;
  overflow: hidden;
  list-style-position: inside;
  list-style-type: lower-alpha;
  padding-left: 15px;
  text-indent: -15px;
}

.list li:after {
  content: "..........................................................................";
  text-indent: 20px;
  display: inline-block;
  letter-spacing: 6px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: -10;
}

.list li span {
  display: inline;
  background-color: #fff;
  padding-right: 1px;
}


.list li .number {
  float: right;
  font-weight: bold;
  color: #198e9d;
  background-color: #fff;
  padding-left: 17px;
}

<div>
  <ol>
    <li>
      <ol class="list">
        <li style="margin-bottom: 1em; margin-top: -1em;"><span style="padding-left: em;">Snout as long as rest of head (Fig 6a); gill rakers absent; first dorsal fin with 13 – 27 spines</span> <span class="number"><em>Acanthocybium solandri</em> (wahoo)</span></li>
        <li class="list;" style="margin-bottom: 2em;"><span style="padding-left: .1em;">Snout much shorter than rest of head (Fig. 6b); at least 3 gill rakers present; first dorsal fin with 8 – 22 spines</span> <span class="number"><em>Scomberomorus</em> (Spanish mackerel)</span></li>
      </ol>
    </li>
    <li>
      <ol class="list">
        <li style="margin-bottom: 1em; margin-top: -1em;"><span style="padding-left: .1em;">2 lateral lines (Fig. 4)</span> <span class="number"><em>Grammatorcynus bilineatus</em> (doublelined mackerel)</span></li>
        <li style="margin-bottom: 2em;"><span style="padding-left: .1em;">A single (upper) lateral line</span> <span class="number">3</span></li>
      </ol>
    </li>
  </ol>
</div>

Answer 1

This works. I also cleaned up your HTML/CSS, hope you don't mind.

div {
  overflow: hidden;
}

ol {
  list-style-position: outside;
}

.list li {
  position: relative;
  list-style-position: outside;
  list-style-type: lower-alpha;
}

.list .list-item {
  margin: 1em 0;
}

.list .list-item:last-child {
  margin: 0 0 2em;
}

.list .list-item::before {
  content: "..........................................................................";
  text-indent: 5px;
  letter-spacing: 6px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: -10;
}

.list .list-item .text::after {
  content: "..........................................................................";
  text-indent: 5px;
  letter-spacing: 6px;
  position: absolute;
  left: 0px;
  z-index: -10;
}

.list .list-item span {
  display: inline;
  background-color: #fff;
  padding-right: 1px;
}

.list .list-item .number {
  float: right;
  font-weight: bold;
  color: #198e9d;
  background-color: #fff;
  padding-left: 17px;
}

/* Clearfix */
.list .list-item::after {
  content: "";
  display: block;
  clear: both;
}

<div>
  <ol>
    <li>
      <ol class="list">
        <li class="list-item"><span class="text">Snout as long as rest of head (Fig 6a); gill rakers absent; first dorsal fin with 13 – 27 spines</span> <span class="number"><em>Acanthocybium solandri</em> (wahoo)</span></li>
        <li class="list-item"><span class="text">Snout much shorter than rest of head (Fig. 6b); at least 3 gill rakers present; first dorsal fin with 8 – 22 spines</span> <span class="number"><em>Scomberomorus</em> (Spanish mackerel)</span></li>
      </ol>
    </li>
    <li>
      <ol class="list">
        <li class="list-item"><span class="text">2 lateral lines (Fig. 4)</span> <span class="number"><em>Grammatorcynus bilineatus</em> (doublelined mackerel)</span></li>
        <li class="list-item"><span class="text">A single (upper) lateral line</span> <span class="number">3</span></li>
      </ol>
    </li>
  </ol>
</div>