ionic 4 离子选择选项文本换行

Question

I'm unable to wrap the text in my ion-select-option.

 <ion-list> <ion-list-header>Select one of your work orders</ion-list-header> <ion-item> <ion-select [(ngModel)]="selection" (ionChange)="optionsFn(selection)"> <ion-select-option [value]="work" *ngFor="let order of workOrder">{{order.destination}} - {{order.startDate | date: "MM/dd/yyyy"}} - {{order.endDate | date: "MM/dd/yyyy"}}</ion-select-option> </ion-select> </ion-item> </ion-list>

I actually saw a solution using the following CSS

 .alert-radio-label.sc-ion-alert-ios { padding-left: unset; padding-right: unset; -webkit-padding-start: 13px; padding-inline-start: 13px; -webkit-padding-end: 13px; padding-inline-end: 13px; white-space: pre-wrap; }

If I add white-space: pre-wrap; in the console debugger the text from the ion-select will wrap successfully with the following:

The problem is if I add that to the css it doesn't take effect. So I'm not sure where it should be added. In another post someone suggested adding it to the app.css but I don't have a global app.css in my ionic 4 project.

Answer 1

由于警报 html 在您的组件之外，您需要将其添加到您的应用程序的全局 CSS 中...在 Ionic 4 生成的项目中，您可以使用 global.scss，如果找不到或它不起作用......使用variables.scss，虽然我认为你可以只使用global.scss。