How do add word wrap in a ionic-selectable?

Issue

I am using the ionic-selectable plugin in my ionic App. Occasionally I get longer text in my section areas that get cut off and are followed by ... .

I have been able to add the css from the ionic-selectable plugin to my global.scss

@import '~ionic-selectable/esm5/ionic-selectable.component.min.css';

.ionic-selectable-item-is-selected,.ionic-selectable-item-is-disabled {
  color:#ff0000 !important;
}

.ionic-selectable-value {
  overflow-wrap: break-word; // does not work
  font-size: 10px; 
  text-size-adjust: 10%; // does not work
}


.ionic-selectable-item {
  overflow-wrap: break-word; // does not work
  min-height: 20px;
  font-size: 10px;
}

html

<ion-item>
  <ion-label  position="stacked" class="ion-text-wrap" >{{ 'NEW.dept' | translate }}</ion-label>
  <ionic-selectable
    placeholder="{{ 'NEW.selectdept' | translate }}"
    name="business"
    class="form-control"
    [(ngModel)]="selectedBusiness"
    [items]="list"
    itemValueField="name"
    itemTextField="name"
    [canSearch]="true">
  </ionic-selectable>
</ion-item>

link to plugin

https://github.com/eakoriakin/ionic-selectable

I have been able to edit font size, colors etc.. But I cannot add a word wrap or auto text size to fit in div.ionic-selectable-value.

Any help would be greatly appreciated.

Solution

This no longer works

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

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

The updated answer is

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

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

this turns of the white-space: nowrap which was the real culprit

Answered By - Thomas Degroot