How do add word wrap in a ionic-selectable?

Solution 1:

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

Solution 2:

Try adding ng-deep which will pierce the shadow DOM.

 ::ng-deep .ionic-selectable-item {
   overflow-wrap: break-word!important;
   min-height: 20px;
   font-size: 10px;
 }