гибкий экран не прерывает длинные строки, как ожидалось

Question

Попытка отобразить список вещей в одной строке с помощью flex display.Я использую Angular 7 для разработки.Ниже приведен HTML-код, который я реализовал:

<div class="d-flex">
  <span>Other:&nbsp;</span>
  <div class="d-flex">
    <div *ngFor="let allergy of allergies; let i = index">
      <span *ngIf="i > 0">,</span><span *ngIf="allergy"> {{ allergy }}</span>
      <span *ngIf="!allergy">None</span>
    </div>
  </div>
</div>

d-flex - класс отображения начальной загрузки:

.d-flex {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
}

В моих компонентах аллергия установлена ​​на

allergies = ['dermatological allergies', 'dust', 'pollen', 'mold'];

Дисплей:

Как видно, список не разбивается должным образом и дисплей искажается.Это происходит, когда длина списка превышает вычисленную ширину столбца.Как я могу отобразить его в виде списка, который правильно разбивается, как и ожидалось?Пожалуйста, дайте мне знать, могу ли я улучшить свой вопрос или смогу ли я предоставить какую-либо дополнительную информацию.

Answer 1

Я думаю, это то, что вы хотите:

<div class="d-flex">
  <span>Other:&nbsp;</span>
  <div>
    <ng-container *ngFor="let allergy of allergies; let i = index">
      <span *ngIf="allergy">{{ allergy }}</span><span *ngIf="i < allergies.length - 1">, </span>
      <span *ngIf="!allergy">None</span>
    </ng-container>
  </div>
</div>

Вот пример stackblitz , показывающий, как это выглядит.

Надеюсь, это поможет ...

Answer 2

С Angular я предлагаю вам использовать Flex-layout от Angular.

. Чтобы обернуть свой предмет, используйте row wrap

С вашим кодом,Вы также можете сделать:

<div class="d-flex">
  ...
  ...
    <div *ngFor="let allergy of allergies; let i = index" class="d-flex">
       ...
    </div>
  </div>
</div>