Dots until price in menu item

Question

I'm trying to make list of dishes in menu and I need to make dots until price from description. I want this to look like this

And also if description is too long like this

There is my code

<div className="container-fluid">
        {dishes
          .filter(dish => dish.category.id === props.category.id)
          .map(dish => (
            <div key={dish.id}>
              <div className="row">
                <h1 className="dish-title">{dish.name[state.lang]}</h1>
              </div>
              <div className="row">
                <div className="col px-0">
                  {dish.description[state.lang] && <div className="dish-desc m-0">{dish.description[state.lang]}</div>}
                </div>
                <div className="col-auto">
                  <DishSizes
                    sizes={dish.sizes}
                    containerClassName="d-flex flex-column"
                    priceClassName="dish-price px-1"
                  />
                </div>
              </div>
            </div>
          ))}
      </div>

Im mapping my json file, this is just dishes section, that renders all dishes. DishSizes is basically component that renders prices of dish. Do you guys have any idea how to do it?

Maybe this should be a pure CSS question. Using real textual dots will be harder, and will break on screen resize unless you recalculate everything — blex, Jan 09 '21 at 19:55
you can create a pseudo element and use `border: 1px dotted` — Sysix, Jan 09 '21 at 19:56
border doesn't work :( also I need it to work when description is too long — Filippo854, Jan 09 '21 at 20:00

score 2 · Answer 1 · answered Jan 09 '21 at 20:11

2

You can do this with a dotted border.

main {
  width: 35em;
}

h1 {
  font-size: inherit;
}

.sub {
  display: flex;
  align-items: flex-end;
}

.desc {
  flex: 1;
  border-bottom: 1px dotted black;
}

.desc span {
  position: relative;
  background: #fff;
  top: 5px;
}

<main>
  <h1>Club Sandwich with Extra Flavor</h1>
  <div class="sub">
    <div class="desc">
      <span>
      Spicy jalapeno bacon ipsum dolor amet ham hock chuck ribeye short ribs, biltong kevin kielbasa meatloaf shoulder corned beef spare ribs leberkas tenderloin.  &nbsp;<span></div>
    <div class="price">5 EUR</div>
  </div>
</>

answered Jan 09 '21 at 20:11

AKX

152,115
15
115
172

It works, thank you, the only problem is that this dotted border is like 1px under comparing to the desc and it doesn't look that good, is there any way to make it look better? – Filippo854 Jan 09 '21 at 20:22
The idea is that the white span in the desc block hides the border under the text. You will need to fiddle with the CSS to make it look better if things don't quite align. – AKX Jan 09 '21 at 20:24

score 1 · Answer 2 · answered Apr 06 '23 at 17:10

.price-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.2em;
}

.item-name {
  font-weight: bold;
  margin-right: 0px;
  text-align: left;
}

.price-separator {
  flex: 1;
  border-bottom: 2px dotted #999;
  margin: 0.6em 5px 0;
}

.item-price {
  font-weight: bold;
  text-align: right;
}

<div class="price-display">
  <span class="item-name">Artikelname</span>
  <span class="price-separator"></span>
  <span class="item-price">99,99 &euro;</span>
</div>

Please add some explanation to this answer. How does it differ from the accepted answer posted 2 years ago? — miken32, Apr 06 '23 at 17:32

Dots until price in menu item

2 Answers2