Question

我在Reactjs

中有一个简短的设计

Monday......................08:00 AM - 21:00 PM

如您在上面看到的，我有很多点，如何在不输入很多点的情况下将其缩短？输入点[....]，这样对网站不利。

对此有任何想法。你能支持我吗？

Answer 1

您可以在CSS中使用虚线borders进行此操作。在下面的示例中，我使用了Flex布局。按照我在CSS代码注释中指示的那样，根据需要重新放置点。

const App = () => {
  return (
    <React.Fragment>
      <div className="dotted-data-container">
        <div className="dotted-data-key">Monday</div>
        <div className="dotted-data-separator"></div>
        <div className="dotted-data-value">08:00 AM - 21:00 PM</div>
      </div>
      <div className="dotted-data-container">
        <div className="dotted-data-key">Saturday</div>
        <div className="dotted-data-separator"></div>
        <div className="dotted-data-value">08:00 AM - 21:00 PM</div>
      </div>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

.dotted-data-container {
    display: flex;
}

.dotted-data-separator {
    flex: 1;
    border-bottom: 2px dotted; /* style as necessary */
    position: relative;
    top: -2px; /* reposition as necessary */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

这应该做到。

[...new Array(numberOfDots)].map(()=> ".").join("")

如何使用CSS在虚线中创建虚线以在行中显示数据？

2 个答案: