Dot leaders spanning excessive lines

Question

I am trying to create a responsive taxonomic key including dot leaders based on nested lists and code used to create a table of contents. It's nearly complete however the dot leaders sometimes span over two lines when they don't need to. They should only span over a second line when the "page number" or "species" is too long to fit on the same line as the initial text, forcing it onto the line below.

An example of what I want can be seen here: 4a is how I want it to look, 4b is not how I want it to look

I'm not sure what is causing this to happen as it doesn't 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;
}

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

/* --figcaption-- */
.wp-caption-text {
 float:right;
 font-size: 0.9em; 
}

/* image info */
.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 &lt;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>

Check this out: https://stackoverflow.com/questions/18621567/css-styling-a-table-of-contents — omukiguy, Feb 27 '18 at 08:42
@omukiguy thats what I based my code in initially, it doesn't help with my issue. cheers — hloneill, Feb 27 '18 at 23:50
Paste a JSbin, and I'll take a look. But I believe it is unavoidable. — Josh Bradley, Mar 01 '18 at 03:45

score 0 · Answer 1 · answered Mar 01 '18 at 04:03

I could not replicate your issue, if you can please paste a link to an example. However, using negative margins should be reserved as a last resort, and I believe could have caused the issue, depending on the browser. Try this.

#key {
    overflow: hidden;
}

ol {
  list-style-position: outside;
}

ol.list {
    padding-left: 25px;
    margin-bottom: 20px;
}

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

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

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

/* --figcaption-- */
.wp-caption-text {
    float:right;
    font-size: 0.9em;   
}

/* image info */
.info {
    text-align:right;
  color:grey;
    margin-top:-1em;
    font-size:0.899em;
    background-color:#fff
}

I tried removing the negative margin in ol.list but it doesn't change anything. It only happens sometimes hence it is hard to recreate. I am using WordPress on Chrome. Is this what you need? https://jsbin.com/wayarukace/1/edit?html,css,output Cheers — hloneill, Mar 02 '18 at 00:23

Dot leaders spanning excessive lines

1 Answers1