X個の結果の後にデータをラップするCSS要素

Question

ng-repeatの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表示未来：

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>