时间戳

首页 > 解决方案 > 点直到菜单项中的价格

javascript - 点直到菜单项中的价格

问题描述

我正在尝试在菜单中列出菜肴，我需要根据描述制作点直到价格。我希望它看起来像这样 在此处输入图像描述

而且如果描述太长这样

在此处输入图像描述

有我的代码

<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>

我正在映射我的 json 文件，这只是菜肴部分，它呈现所有菜肴。DishSizes 基本上是呈现菜肴价格的组件。你们知道怎么做吗？

标签： javascriptcssreactjs

解决方案

您可以使用虚线边框来执行此操作。

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>
</>

推荐阅读