Блог

Главная - Вопросы по программированию - Элемент CSS для переноса данных после X количества результатов

Элемент CSS для переноса данных после X количества результатов

#javascript #html #css #angularjs

#javascript #HTML #css #angularjs

Вопрос:

Есть ли в CSS способ переноса текста после X количества результатов в моем ng-repeat?

Смотрите код ниже.

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>

Текущий пользовательский интерфейс — этот список может быть в 10 или 20 раз длиннее. Поэтому я хотел бы перенести в новый столбец после стольких результатов.

 Orders
6432508
6432512
6432513
6432511
6432509

Будущее отображения пользовательского интерфейса:

 Orders
6432508  6432515
6432512  6432516
6432513  6432517
6432511  6432518
6432509  6432519

Ответ №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>

Комментарии:

1. Но после скольких строк он решает перенести? Есть ли способ указать, как после 25 начать новый столбец?

2. @Andrew вы можете увеличивать или уменьшать max-height , чтобы настроить больше или меньше элементов в одном столбце.