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


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


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

    display: grid;

  .wpSelect {
    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

item1, item2, item3, item4

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


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.