Fill remaining whitespace in line with dots (multiline text)

Question

I'm trying to get an html page to look something like this:

I got pretty close but I'd like to make another step and try to fill with dots all the whitespace in the text until the end of the line. All without using js.

I found different solutions for a single line element like most of the ones I have in the document but nothing that worked for a multiple line element.
Closer I got was using an :after selector to add some dots as content and setting the overflow: hidden on the text, which caused my longer lines to disappear.

I'm approaching this using a 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>

here's a fiddle with the code I have right now.

Has any of you ever struggled with the same problem? Any advice appreciated

Answer 1

You can use :after to fill the available space with dots(.).. I have added overflow: hidden and position:relative at td level.

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

See the Snippet below:

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

You can test it here also..

Answer 2

Just use a dotted border on the bottom of a div. You can use flexbox to force a div to span the remainder of the space. I didn't use a table just a normal div it is more flexible in its use case but if you want to use a table you can apply the same philosophy. Here is a simple example:

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