Ion-select-option text wrap not working - truncated with eclipses

[morsagmon]

In my ionic 6.20.1 and Angular 15.2.7 I have an ion-select element with multiple ion-select-option items, some of which have long text.

The text in all those ion-select-option items is truncated with three dots.
I want to wrap the text.

In the chrome dev console I can see the culprit, coming from:

.item .sc-ion-label-ios-h {
   white-space: nowrap;
}

When I disable this - the wrap works fine.
Even when I add to the ion-label element:
white-space: normal !important;
It wraps perfectly.

However, when I code this to the page css file on the ion-label class - it does not work.

I tried many thing - nothing works!

This is html part:

<ion-radio-group>
...
...
...

<ion-item lines="none" class="recovery-option-item">
              <ion-label color="primary" class="ion-text-wrap">Recover with a security question</ion-label>              
              <ion-radio slot="start" name="question" value="question" 
                color="primary"></ion-radio>              
</ion-item>

<div *ngIf="recoveryOptionSelected==2" class="recovery-option-body">
              <ion-item lines="none">
                <ion-badge color="medium" disabled="true">Least secured</ion-badge>            
              </ion-item>
              <ion-item lines="none" class="input-item item-label-floating">
                <ion-label position="floating">My question</ion-label>
                <ion-select formControlName="recovery_question" placeholder="Select your recovery question" interface="popover" class="ion-text-wrap" (ionChange)="onRecoveryQuestionChange($event)"
                  cancelText="Cancel" okText="OK">
                  
                    <ion-select-option *ngFor="let item of recoveryQuestions" [value]="item.index" class="alert-radio-label ion-text-wrap">
                      <ion-label class="recovery-option-label ion-text-wrap">{{item.question}}</ion-label>
                    </ion-select-option>
                  
                </ion-select>                
              </ion-item>
              <ion-item lines="none" class="input-item item-label-floating">            
                <ion-input label="My answer is..." labelPlacement="floating" type="text" formControlName="recovery_answer" clearInput></ion-input>
              </ion-item>                   
            </div>
</ion-radio-group>

I tried all of these in the global.scss:

.alert-radio-label.sc-ion-alert-md,
 .alert-radio-label.sc-ion-alert-ios {
    white-space: normal !important;
 }
 
 
 .alert-tappable.alert-radio {
    height: auto !important;
    contain: content !important;
 }
 
 .item.sc-ion-label-md-h, .item .sc-ion-label-md-h{
    white-space: normal !important;
}

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

.alert-checkbox-label{
    white-space: normal !important;
  }

  .alert-radio-label{
    white-space: normal !important;
  }
  
.alert-tappable.sc-ion-alert-md,
.alert-tappable.sc-ion-alert-ios {
    height: initial !important;
    contain: initial !important;
  }

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

And these in the page scss:

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

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

I am really stuck for hours on this.
Any pointers?
Thanks!

[juanmahechadc]

Hi everyone, I had a problem to be able to make a line break in a long text using ion-select with popover interface, try to do many things with css, but without success, they only worked on modal type interface, so, I started looking for what to do in the browser DOM when I come across a very specific ionic feature that is created within the #shadow-roor (open) this property has a class ‘label-text-wrapper’, so create this function that can be called when the ion-select is clicked to be able to remove that class and make a line break.

this is the function,

removeLabelWraperSelect() {
setTimeout(() => {
try {
// Seleccionar el elemento ion-select-popover
var selectPopover = (
document.querySelector(“ion-select-popover”)
);

    var ionRadios = selectPopover.querySelectorAll("ion-radio");

    // Función para verificar si un elemento tiene un #shadow-root abierto
    function tieneShadowRootAbierto(elemento: any) {
      return elemento.shadowRoot && elemento.shadowRoot.mode === "open";
    }
    // Función para buscar un elemento con la clase "label-text-wrapper" dentro de un #shadow-root
    function buscarElementoConClaseLabelTextWrapperEnShadowRoot(
      shadowRoot: any
    ) {
      return shadowRoot.querySelector(".label-text-wrapper");
    }
    // Función para eliminar la clase "label-text-wrapper" de un elemento
    function eliminarClaseLabelTextWrapperDeElemento(elemento: any) {
      elemento.classList.remove("label-text-wrapper");
    }

    // Recorrer los elementos ion-radio y verificar el #shadow-root y la clase "label-text-wrapper"
    ionRadios.forEach(function (ionRadio) {
      // Verificar si el ion-radio tiene un #shadow-root abierto
      if (tieneShadowRootAbierto(ionRadio)) {
        var shadowRoot = ionRadio.shadowRoot;
        // Buscar un elemento con la clase "label-text-wrapper" dentro del #shadow-root
        var elementoLabelTextWrapper = buscarElementoConClaseLabelTextWrapperEnShadowRoot(
          shadowRoot
        );
        // Si se encontró un elemento con la clase "label-text-wrapper", eliminar la clase
        if (elementoLabelTextWrapper) {
          eliminarClaseLabelTextWrapperDeElemento(elementoLabelTextWrapper);
        }
      }
    });
  } catch (err) {}
}, 100);

is posible to make it