用点（多行文本）将剩余的空白填充成一行

Question

我正在尝试获取一个HTML页面，如下所示：

我已经很接近了，但是我想走一步，尝试用点填充文本中的所有空格，直到行尾。全部不使用js。

我为单行元素找到了不同的解决方案，就像我在文档中找到的大多数解决方案一样，但没有任何解决方案适用于多行元素。
更接近我的地方是使用:after选择器添加一些点作为内容，并在文本上设置了overflow: hidden，这使我的较长线条消失了。

我正在使用表atm来解决这个问题：

.container {
  width: 600px;
  text-align: justify;
  font-family: 'Arial Narrow', arial, sans-serif;
}

table {
  width: 100%;
}

.incipit {
  width: 10%;
}

.text {
  width: 90%;
}

.page {
  width: 15px;
}

.level-0>.text {
  width: 100%;
}

.level-0 {
  font-weight: bold;
}

.level-1 {
  font-weight: bold;
}

<div class="container">
  <h2>
    Table of Contents
  </h2>
  <table>
    <tr class='level-0'>
      <td class="text" colspan="2">First level index element</td>
      <td class="page" align="right" valign="bottom">1</td>
    </tr>
    <tr class="level-1">
      <td class="incipit" valign="top">Art. 1</td>
      <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel elementum erat. In non magna tellus. Donec id tellus ut leo consequat elementum. Praesent eu ligula in neque ultricies mollis sit amet sed risus.</td>
      <td class="page" align="right" valign="bottom">1</td>
    </tr>
  </table>
</div>

这是一个fiddle，其中包含我现在拥有的代码。

你们有没有遇到过同样的问题？任何建议表示赞赏

Answer 1

只需在div底部使用虚线边框即可。您可以使用flexbox强制div跨越空间的其余部分。我不只是使用普通的div表，它在用例中更为灵活，但是如果您要使用表，则可以应用相同的原理。这是一个简单的示例：

.row {
  display: flex;
  width: 100%;
}

.dots {
  flex: 1;
  border-bottom: 1px dotted #000;
}

<div class="row">
  <div class="text">First level index element</div>
  <div class="dots"></div>
  <div class="page">1</div>
</div>

Answer 2

您可以使用:after用点（.）填充可用空间。我在td级别添加了overflow: hidden和position:relative。

.text:after{
    content: " ....................................................................................................................... ";
    position: absolute;
    padding-left: 5px;
}

请参见下面的代码段

.container {
  width: 600px;
  text-align: justify;
  font-family: 'Arial Narrow', arial, sans-serif;
}

table {
  width: 100%;
}

.incipit {
  width: 10%;
}
td{  
  overflow: hidden;
    position: relative;
}

.text { 
  width: 90%;
}
.text:after{
    content: " ....................................................................................................................... ";
    position: absolute;
    padding-left: 5px;
}

.page {
  width: 15px;
}

.level-0 > .text {
  width: 100%;
}

.level-0 {
  font-weight: bold;
}

.level-1, .level-2 {
  font-weight: bold;
}

<div class="container">
  <h2>
  Table of Contents
  </h2>
  <table>
  <tr class='level-0'>
    <td class="text" colspan="2">First level index element</td>
    <td class="page" align="right" valign="bottom">1</td>
  </tr>
  <tr class="level-1">
    <td class="incipit" valign="top">Art. 1</td>
    <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel elementum erat. In non magna tellus. Donec id tellus ut leo consequat elementum. Praesent eu ligula in neque ultricies mollis sit amet sed risus.</td>
    <td class="page" align="right" valign="bottom">1</td>
  </tr>
  <tr class="level-2">
    <td class="incipit" valign="top">Art. 2</td>
    <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel elementum erat. In non magna tellus. Donec </td>
    <td class="page" align="right" valign="bottom">2</td>
  </tr>
  </table>
</div>

您也可以here对其进行测试。.