ionic 4 "ion-option" text wrap

Question

I am working with ionic 4 and i am having a problem trying to do a text wrap inside a "ion-select"

my select looks like this:

if i change my css directly on google chrome ( Style section on the "inspect element" menu) to "white-space: pre-wrap"

It looks like this:

and this is what i want to get.

on my HTML code i have this:

<ion-item>
  <ion-label>Dirección de Entrega<a style="color: brown;">*</a></ion-label>
  <ion-select [(ngModel)]="ordHerder.addressId" popover >
    <ion-option style="white-space: pre-wrap !important;" *ngFor="let item of register_data.directions" value="{{item.recId}}" text-wrap>{{item.direction}}</ion-option>
  </ion-select>
</ion-item>

and my css:

shopping-car-delivery {
    .alert-ios .alert-radio-label{ white-space: pre-wrap !important;}
    .alert-md .alert-radio-label{ white-space: pre-wrap !important;}
    .alert-wp .alert-radio-label{ white-space: pre-wrap !important;}
}

Thanks :)

Answer 1

just add this in your app.scss if you are using ionic 4

.alert-radio-label.sc-ion-alert-md {
  white-space: pre-line !important;
}

.alert-radio-label.sc-ion-alert-ios {
  white-space: pre-line !important;
}

Answer 2

Adding this to app.scss worked:

ion-label {
   white-space: normal !important;
}

Answer 3

Fixed it by overriding alert-radio-label.sc-ion-alert-md , alert-radio-label.sc-ion-alert-ios and updating whitespace to pre-line in page.scss

.alert-radio-label.sc-ion-alert-md {
  padding-left: 52px;
  padding-right: 26px;
  padding-top: 13px;
  padding-bottom: 13px;
  flex: 1;
  color: var(--ion-color-step-850, #262626);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: pre-line;
}

Also, reduced font-size to 14px, since my text was around 35-40 characters.

.

Answer 4

If none of the above solutions works try root level css changes like below

   :root {
  ion-popover ion-select-popover ion-radio-group ion-item ion-label{
            white-space: pre-line !important;
  }
}