Ion-select text wrap not working-How to overwrite the white-space property


Hi - I can’t figure out how to wrap my text in my ion-select. Can anyone help me overwrite the white-space property?


      <ion-option value="PCIP01"> "Agriculture, Agriculture Operations, and Related Sciences"</ion-option>
      <ion-option value="PCIP03"> "Natural Resources and Conservation"</ion-option>
      <ion-option value="PCIP04"> "Architecture and Related Services"</ion-option>


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

But the CSS is not being applied. Please help.

My result

1 Like

Have you solved? I need that too!


You should just be able to apply the text-wrap attribute to ion-option:

<ion-option text-wrap value="42">The Answer</ion-option>


I have not found a solution. text-wrap doesn’t seem to be working on ion-option. Maybe a bug?


Same here, with last release.


Hello, I solved it from the css of the page

.alert-ios .alert-radio-label{
white-space: pre-line;

.alert-md .alert-radio-label{
white-space: pre-line;

.alert-wp .alert-radio-label{
white-space: pre-line;


Didn’t figure out how to text-wrap but figured out a work around. On ion-select, added a min-width css property.


Still not working for me…Not sure why.

1 Like

I had the same error, try to implement a custome class css in selectedOption, for more information read this: [] and this: []

in the part of cssClass, good luck :wink:



Thanks. I got it working by adding the above css to the main app.scss file.


In the ion- select - option control , the ion-label contrl gives the ‘white-space: nowrap’ by default. To overwrite this add below code to the app.scss style sheet (main css file inside the app folder)

white-space:normal !important;

This will solve the issue. :slight_smile:

1 Like

I ended up adding

.alert-md .alert-radio-label,
.alert-ios .alert-radio-label
white-space: normal !important;

But had to add it to the app.scss trying to add it just to the component did not work.


I added that white-space rule to the SELECT element and it worked out! Thank you!
This is what I got here (add !important to every rule if necessary):

.item-select-customizado select {
    position: relative;
    max-width: 100%;
    white-space: pre-line;
    text-align: left;
1 Like

I use (on .css):
max-width: 100% !important;


Hi nbcesar, were you able to find any solution to this? I tried this, but it did not work.


Thanks JaaG, it worked for me.


Try this…
max-width: 100%;
width: 100%;