ionic 4 ion-select-option 文本换行

Question

我无法将文本换行到我的 ion-select-选项中。

  <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;
}

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

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

Answer 1

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

ionic 4 ion-select-option 文本换行

ionic 4 ion-select-option text wrap

html

css

ionic-framework

ionic4