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

score 4 · Accepted Answer · answered Jul 18 '19 at 17:51

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

for the html part this was a good solution, sadly when I tried to make it work for my case and pass it to itext2pdf to get a pdf out of it everything broke. In any case the answer is perfect for the question I made and sorry for the delay. — Forna, Sep 19 '19 at 09:01

score 2 · Answer 2 · answered Jul 18 '19 at 14:50

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>

good insight but I can't seem to make it work when the text length is 2 lines or more. — Forna, Jul 18 '19 at 15:10

Fill remaining whitespace in line with dots (multiline text)

2 Answers2

Linked