How to show results on different lines Ionic-select

Im trying to display the selected values from an ionic select with one per line instead of comma separated.
I’ve tried setting css classes and using white-space: pre-wrap but nothing seems to work

HTML

<ion-label padding class="dropdown-row" *ngIf="ready == true">
    Work Performed
    <ion-select multiple="" class="wpSelect"
        formControlName="workPerformed"
        [(ngModel)]="repairCodeSelect">
        <ion-option *ngFor="let item of repairCodes" [value]="item.repair_code" class="wpSelect">
            {{item.repair_code}}<br/> \n ahh
        </ion-option>
    </ion-select>
</ion-label>

CSS

.dropdown-row {
    border-color: green;
    border-top-style: outset;

    display: grid;
  }

  .wpSelect {
    white-space:pre-wrap;
    line-break: anywhere;
    color: green;
  }

I’m not sure I understand your problem. What do you mean by “instead of comma separated”? Is your problem a display problem or a logic problem?

Also, it seems odd to me to put an ion-select inside a label. That is not typically how labels are used. Not sure this helps or not.

Its a display problem, basically when you select multiple items from the list, it displays them in a list

ex:
item1, item2, item3, item4

but I am trying to get them displayed on their own lines

ex:
item1
item2
item3
item4

As for the ion-label, I tried removing it and it it didnt seem to affect anything, I’ll see if i can swap it out to something more standard.

I decided to swap out the select for a modal instead, and got it working as required as I dont think its possible for a select to show the result on multiple lines.