ion-select with long text options doesn't render properly on ios and md

Bug Report

Ionic version: 4.0.0

Current behavior: Long ion-select-option won’t be displayed properly in the pop-up compared to ionic 3

Expected behavior: Long ion-select-option should properly size the item and allow the user to see all the text

Steps to reproduce:

1. Create ionic 4 project
2. Add <ion-select> with 2 options: 1 with very long text and 1 with short text
3. Open the ion select. The first element should display only 30-40 characters and hyphens

ios example

md example

if you do the same with an ionic 3 project, this should show properly both of the lines:

ios example

md example

Other information:

Setting white-space: normal; on the alert-radio-label does help a bit to show longer text but still it is maximized to 2 lines. Ionic info:

Ionic:
   ionic (Ionic CLI)             : 4.9.0 (C:\Users\Cactus\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

[plchampigny]

Yup, sorry to the delay in the response. Here’s our workaround:

// Applies a text wrap on ion options
.alert-tappable.alert-radio {
    height: auto;
    contain: content;
}

.alert-radio-label.sc-ion-alert-md,
.alert-radio-label.sc-ion-alert-ios {
    white-space: normal;
}

[elwinschmitz]

For people that experience this same issue on Ionic v5, here is my workaround:

Styles to put in global.scss:

//  Force text-wrap on <ion-select>
ion-select::part(placeholder),
ion-select::part(text) {
  white-space: normal !important;
}
// Force text-wrap on <ion-select-option>'s when shown in an Ionic Alert
ion-alert.select-alert {
  // These widths are pretty arbitrary, so you're use-case(s) could required different widths:
  --width: 33vw !important;
  --max-width: 66vw !important;

  .select-interface-option .alert-radio-label,
  .select-interface-option .alert-checkbox-label {
    white-space: normal !important;
  }
}