Trying to achieve a specific look for an html page, which involves filling whitespace with dots until the end of the line without using javascript.
Various solutions have been attempted for single-line elements, but none have worked for multi-line elements. The closest attempt involved using a :after selector to add dots as content and setting overflow: hidden on the text, causing longer lines to disappear.
The current approach involves utilizing a table:
.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>View the current code here.
If you've faced a similar challenge before, any advice would be greatly appreciated!