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

Question

我无法将文本换行在我的 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>

我实际上看到了使用以下 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;
}

如果我添加空格：pre-wrap;在控制台调试器中，来自 ion-select 的文本将使用以下内容成功换行：

问题是如果我将它添加到 css 中它不会生效。所以我不确定应该在哪里添加。在另一篇文章中，有人建议将其添加到 app.css，但我的 ionic 4 项目中没有全局 app.css。

Answer 1

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