Search code examples
cssflexboxclipjustify

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

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:

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.

Solution

  • 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