点头领导跨越两行

Question

我正在尝试使用点引线创建响应式分类密钥，我已经非常完美了，除非在调整浏览器大小时，领导者右侧的一些文本大于剩余空间，因此它跳转到下一行留下原先空白的空间。我希望有一些点可以填充这个空白区域。

e.g。 'spines'和'Scomberomorus'之间的点看到：

这就是我所拥有的：

这就是我想要的：

为错误道歉我是初学者。

.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

这很有效。我还清理了你的HTML / CSS，希望你不要介意。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我最终解决了这个问题。我只需要删除跨度之间的空间，所以：

<span class="text">here's some fine writing</span><span class="number">5</span>

不

<span class="text">here's some fine writing</span> <span class="number">5</span>