Ionic select overwrite css no wrap

Hi, I have a ionic 4 application and I have to use select component in a browser, but
the option text is long so is a problem because the css for the option have the property white-space: no-wrap

So I try in the scss to add

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

but not working…I think because is a dinamic component and angular transform my scss with

.alert-radio-label[_ngcontent-c0] {
  white-space: normal !important; }[_ngcontent-c0] {
  white-space: normal !important; }```


on some elements

 white-space: normal !important;
    word-wrap: break-word !important;

seems this working, but as fas as I see not on select. Maybe you should take a look to the original implementation on github, how it is implementetd.

Best regards, anna-liebt

1 Like

Thanks but only solution is to use ViewEncapsulation at the component.ts level.
Is not a good solution because the css rules is global, but there aren’t other solutions.
For me is impossible that ionic team create a select component that can have only 6 characters without this workaoround!!!

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  encapsulation: ViewEncapsulation.None