Avitus Avitus - 6 months ago 8x
HTML Question

Ellipses across spanning rows

I'm trying to create rows where there are ellipsis from the end of the left cell to the start of the text of the right cell. The issue is the length of the left cell varies and the length of the right cell also varies. I've tried by aligning 2 divs and then ending the right div with overflow: ellipsis and then starting the right div with ellipsis but I don't know how to figure out how many dots should be added prior to start of the right text.

For example:

Property 1......................................Value 1

Some Property 2.................Some Value 2


You may use flex, order and a pseudo to draw the dots

.ellipsis {
.ellipsis span {
.ellipsis span:first-of-type {
.ellipsis:before {
  display:inline-block;/* optionnal*/
  border-bottom:dotted 1px;
  margin:0 0.2em 0.25em;/* you may tune this */
body {
  padding-top:50px; /* demo snippet in the way */
<p class="ellipsis"><!-- any other tag as li or div does too, CSS does the styling -->
    <span>ellipsis in</span>