I am trying to create a responsive taxonomic key, including point leaders based on nested lists and the code used to create the table of contents. It is almost complete, but point leaders sometimes span two lines when they don’t need it. They should only cover the second line when the "page number" or "view" is too long to fit on the same line as the source text, forcing it to the line below.
An example of what I want can be seen here: 
4a how i want it to look, 4b not how i want it to look
I am not sure what causes this, as it does not happen all the time.
#key { overflow: hidden; } ol { list-style-position: outside; } ol.list { padding-left: 25px; margin-top: -21.8px; } .list li { position: relative; list-style-position: outside; list-style-type: lower-alpha; padding-left: 5px; text-indent: -10px; } .list .list-item { margin: 0 0px 15px; } .list .list-item:last-child { margin: 0 0 40px; } .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; padding-left: 10px; } .list .list-item .number { float: right; font-weight: bold; color: #198e9d; background-color: #fff; padding-left: 11px; } .list .list-item::after { content: ""; display: block; clear: both; } .wp-caption-text { float:right; font-size: 0.9em; } .info { text-align:right; color:grey; margin-top:-1em; font-size:0.899em; background-color:#fff }
<div id="key"> <ol> <li> <ol class="list"> <li class="list-item"><span class="text">Bill short, less than 15% of lower jaw – fork length (Fig. 5a);anus located well anterior of first anal fin by a distance greater than length of first anal-fin base (Fig. 6a)</span><span class="number"><em>Tetrapturus angustirostris</em> (shortbill spearfish)</span></li> <li class="list-item"><span class="text">Bill moderately long, more than 18% of lower jaw – fork length (Fig. 5b); anus slightly anterior of first anal fin by a distance of less than length of first anal-fin base (Fig. 6b)</span><span class="number"><em>Kajikia audax</em> (striped marlin)</span></li> </ol> </li> <li> <ol class="list"> <li class="list-item"><span class="text">Pectoral fins curved in shape, resembling a half sickle (Fig. 7a), rigid unable to be folded back against sides of body (more flexible in individuals <15 kg); dorsal-fin tip bluntly rounded (Fig. 8a); branchiostegal frill long, extending to near level with rear edge of operculum (Fig. 9a); second dorsal-fin anterior to second anal-fin (Fig. 10a)</span><span class="number"><em>Istiompax indica</em> (black marlin)</span></li> <li class="list-item"><span class="text">Pectoral fins strap like (Fig. 7b) flexible, able to be folded back against sides of body; dorsal fin pointed at tip (Fig. 8b); branchiostegal frill short, extending to well forward of rear edge of operculum (Fig. 9b); second dorsal-fin posterior to second anal-fin (Fig. 10b)</span> <span class="number"><em>Makaira nigricans</em> (blue marlin)</span></li> </ol> </li> </ol> </div>
source share