ionic-4 Text-wrap on ion-select-option

Question

HTML

<ion-item>
    <ion-label>Popover</ion-label>
    <ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
      <ion-select-option value="brown" text-wrap>Brownasdfasdfasdfasdfadfadsfasdfadfasdfafdsadfaf</ion-select-option>
      <ion-select-option value="blonde">Blonde</ion-select-option>
      <ion-select-option value="black">Black</ion-select-option>
      <ion-select-option value="red">Red</ion-select-option>
    </ion-select>
  </ion-item>

SASS:

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

I'm not able to override the existing white-space: nowrap

I would like to know how to override the shadow-dom css

Answer 1

On Ionic 5, the only thing that worked for me was:

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

Answer 2

As there's no attribute for this web-component it does make this a little difficult and messy

global.scss:

.item.sc-ion-label-md-h, .item .sc-ion-label-md-h{
     white-space: normal !important;
}

//or just 

 .sc-ion-label-md-h{
     white-space: normal !important;
}

This overrules the component styling classes.