I'm trying to get an html page to look something like this:
我已经非常接近了，但我想再迈出一步，尝试用点填充文本中的所有空白，直到行尾。全部不用js。
我找到了针对单行元素的不同解决方案，就像文档中的大多数解决方案一样，但没有任何解决方案适用于多行元素。
我更接近的是使用:after选择器添加一些点作为内容并设置overflow: hidden在文本上，这导致我的较长线条消失了。
我正在使用台式自动取款机来解决这个问题：
.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 https://jsfiddle.net/9xc8v2ja/用我现在拥有的代码。
你们中有人曾经遇到过同样的问题吗？任何建议表示赞赏
您可以使用:after用点填充可用空间（.）.. 我已经添加了overflow: hidden and position:relative在td级别。
.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 https://jsfiddle.net/nimittshah/j2mpgLt3/ also..