javascript - 在 X 个结果后包装数据的 CSS 元素

Question

在我的 ng-repeat 中，CSS 中是否有一种方法可以在 X 个结果后换行？

见下面的代码。

CSS:

.orders-container {
    height: auto;
    width: auto;
    margin-top: -5px;
    border: 1px solid black;
    position: relative;
    background-color: ghostwhite;
}

HTML:

<div class="orders-container">
    <ul>
        <span class="order-title">Orders</span>
            <li ng-repeat="num in nums track by $index">
                <span class="part-title">{{ nums }}</span>
            </li>
    </ul>
</div>

当前的 UI 显示 - 这个列表很容易是这个长度的 10 或 20 倍。所以我想在这么多结果之后换成一个新的专栏。

Orders
6432508
6432512
6432513
6432511
6432509

UI显示 future :

Orders
6432508  6432515
6432512  6432516
6432513  6432517
6432511  6432518
6432509  6432519

Answer 1

你可以用 css 做到这一点 flexbox模态。

.orders-container {
  margin-bottom: 20px;
}
.orders-container ul {
  flex-direction: column;
  max-height: 120px;
  background: black;
  list-style: none;
  flex-wrap: wrap;
  display: flex;
  padding: 5px;
  color: white;
  padding: 0;
  margin: 0;
}

<div class="orders-container">
  <span class="order-title">Orders</span>
  <ul>
    <li><span class="part-title">6432508</span></li>
    <li><span class="part-title">6432509</span></li>
    <li><span class="part-title">6432510</span></li>
    <li><span class="part-title">6432511</span></li>
    <li><span class="part-title">6432512</span></li>
  </ul>
</div>

<div class="orders-container">
  <span class="order-title">Orders</span>
  <ul>
    <li><span class="part-title">6432508</span></li>
    <li><span class="part-title">6432509</span></li>
    <li><span class="part-title">6432510</span></li>
    <li><span class="part-title">6432511</span></li>
    <li><span class="part-title">6432512</span></li>
    <li><span class="part-title">6432513</span></li>
    <li><span class="part-title">6432514</span></li>
    <li><span class="part-title">6432515</span></li>
    <li><span class="part-title">6432516</span></li>
  </ul>
</div>