I think there’s a bug in Ionic. I’ve been working a few days to resolve this.
The issue is using ion-select. When I use the ion-select/ion-select option elements I the text will not wrap.
Using this code
<ion-select [(ngModel)]="selection" (ionChange)="optionsFn(selection)">
<ion-select-option [value]="itinerary" *ngFor="let itinerary of matchItinerary">{{itinerary.destination}} - {{itinerary.startDate | date: "MM/dd/yy"}} - {{itinerary.endDate | date: "MM/dd/yy"}}</ion-select-option>
</ion-select>
I get the following
Even after I apply the online suggestion of adding white-space: pre-wrap; to the variable.scss.
However, when I use the regular select/option element then it works. Notice the 2d photo with the text wrapped
<select [(ngModel)]="selection" (ionChange)="optionsFn(selection)">
<option [value]="itinerary" *ngFor="let itinerary of matchItinerary">{{itinerary.destination}} - {{itinerary.startDate | date: "MM/dd/yy"}} - {{itinerary.endDate | date: "MM/dd/yy"}}</option>
</select>
The problem with the second option is that it doesn’t populate the list…it doesn’t take the value when I don’t use the ionic elements.