Ionic-select word wrap

Ionic Framework
1

I am using ion-select with ion-select-option in ionic v5. My problem is that when the text is selected it is displayed within a div of class select-text that is part of a shadow dom. The text has the css white-space:nowrap so I cannot see all of the text. See example image.

Screenshot from 2020-07-06 14-43-03
Screenshot from 2020-07-06 14-43-03908×300 31 KB

As it stands it is very difficult to make any sense of the selected text without recourse to reopening the popup, which is not easy for 15 odd questions.

I would like to have multi-line text and control it myself, similar to:

Screenshot from 2020-07-06 14-44-13
Screenshot from 2020-07-06 14-44-13760×308 32.9 KB

This has been done within a web emulator using chromium.

I have found the code that generates the select-text (ion-select_3-md.entry.js) and the white-space css is not built from a variable and it is not inherited. Here is an extract: .select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}. So short of changing the md and ios code how can I achieve having wrapped selected text?

Any help would be much appreciated.

2

I managed to fix this by:
Setting the format to ‘stacked’, as in:

    <ion-label position="stacked">{{style.label}}</ion-label>
    <ion-select class="ion-text-wrap select-text" formControlName={{style.name}}>
      <ion-select-option *ngFor="let option of style.options" value="{{option.value}}">{{option.text}}</ion-select-option>

Then in my scss for the page I have:

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

That gives a full width multiline label with a full line selection. This is much better.