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

Question

我试图让一个 html 页面看起来像这样：

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

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

我正在使用 table 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

您可以使用: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..

Answer 2

只需在 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>