css justify with flexbox (no table): fill empty space with dots

Question

I'm using php to generate a menu from a mysql database. In my design it's not possible to use a html table so I use an unnumbered list . Now i have 3 vars: dishname, short_description and the price.

Between the [dishname (short_description)].................[price] need to be flexible dots;

In this screenshot you can see what I have now:

html:

<ul>
<li class=dish>
<div>
<a class=dish>...</a>
<span class=short>...</span>
</div>
<span class=price>..€</span>
</li>
</ul>

css:

ul.submenu li{ line-height:1.6rem; margin-left: 2rem; list-style-type: circle; text-transform: lowercase; width: 100%;}
li.dish{ display: flex; justify-content: space-between; }
li.dish span.short::after{ position: absolute; z-index: -1; content: "....................................................................................................................................";}
span.short{ font-size: 0.8rem; font-style: italic;}
span.price{ font-size: 1rem;  }

In the screenshot you can see what the problem is, the "................." should be clipped or responsive to the available space in the width. There should be no dots visible after the price.

You forgot to add `width` and `overflow: hidden`. It would be great to have a [mre]. — Praveen Kumar Purushothaman, Dec 07 '20 at 17:35
the `width:100%;` is in the `ul.submenu li` and I tried to put an `overflow: hidden;` there too, but it doesn't do the trick unfortunately. I'll try to make the MRE... Where should I put the `overflow: hidden`? — Kleajmp, Dec 07 '20 at 17:44

score 1 · Accepted Answer · answered Dec 07 '20 at 17:51

I think it would be better if you would not use the "....." as a content in the after but you make it fill up all the available space an use a border bottom in the after something like this:

ul.submenu li {
    line-height: 1.6rem;
    margin-left: 2rem;
    list-style-type: circle;
    text-transform: lowercase;
    width: 100%;
}
li.dish {
    display: flex;
    justify-content: space-between;
}
li.dish > div {
    display: flex;
    flex: 1;
}
li.dish span.short::after {
    content: " ";
    flex: 1;
    border-bottom: 1px dotted #000;
}
span.short {
    font-size: 0.8rem;
    font-style: italic;
    flex: 1;
    display: flex;
}
span.price {
    font-size: 1rem;
}

<ul>
  <li class=dish>
    <div> <a class=dish>Dish 1</a><span class=short>(Vis, Pastfdafdasa)</span></div>
    <span class=price>€</span>
  </li>
  
  <li class=dish>
    <div> <a class=dish>Dish 2</a><span class=short>(Vis, Pastcx\zc\xzcx\za)</span></div>
    <span class=price>€</span>
  </li>
  
  <li class=dish>
    <div> <a class=dish>Dish 3</a><span class=short>(Vis, Pastaczczcxz\cx\z)</span></div>
    <span class=price>€</span>
  </li>
</ul>

This way you can make it responsive as well. If you want to move the dots up or down you can add margins to the li.dish span.short::after

you are a genius! thanks to be constructive, problem solved! no thanks to all the -1 trolls. — Kleajmp, Dec 07 '20 at 18:04
The -1 as are because the question is not formatted properly. Try to use the code snippet functionality the feature and you will get answers fasters as well. — Zsolt Balogh, Dec 07 '20 at 18:56

css justify with flexbox (no table): fill empty space with dots

1 Answers1