Hello, I am rendering an array of emails and some that are very long cause me to break the element.
it seems like this:
it’s not what i want
expected result
(note that with some spaces it works well)
quiero que esté con wrap si es largo o con overflow elipsis.
<ion-select label="Select your driver" placeholder="Email">
<ion-select-option>
verylongemailwithoutspaces@gmail.com
</ion-select-option>
</ion-select>
i’ve tried some special scss withotus good results
// Force text-wrap on <ion-select-option>'s when shown in an Ionic Alert
ion-alert.select-alert {
// These widths are pretty arbitrary, so you're use-case(s) could required different widths:
--width: 33vw !important;
--max-width: 66vw !important;
.select-interface-option .alert-radio-label,
.select-interface-option .alert-checkbox-label {
white-space: normal !important;
}
}
.alert-radio-label.sc-ion-alert-md {
white-space: normal !important;
}
.mat-select-panel mat-option.mat-option {
height: unset;
}
.mat-option-text.mat-option-text {
white-space: normal;
}
.mat-select-panel mat-option.mat-option {
margin: 1rem 0;
overflow: visible;
line-height: initial;
word-wrap: break-word;
white-space: pre-wrap;
}
.mat-option-text.mat-option-text {
white-space: normal;
}
.alert-radio-label.sc-ion-alert-md,
.alert-radio-label.sc.ion-alert-ios {
white-space: normal;
}
.alert-tappable.alert-radio {
height: auto;
contain: content;
}
what should i do?
ionic v7