ionic 4“离子选项”文本换行

Question

我正在使用 ionic 4，但在尝试在“离子选择”中进行文本换行时遇到问题

我的选择看起来像这样：

如果我直接在谷歌浏览器上将我的 css（“检查元素”菜单上的“样式”部分）更改为“空白：预包装”

它看起来像这样：

这就是我想要的。

在我的 HTML 代码中，我有这个：

<ion-item>
  <ion-label>Dirección de Entrega<a style="color: brown;">*</a></ion-label>
  <ion-select [(ngModel)]="ordHerder.addressId" popover >
    <ion-option style="white-space: pre-wrap !important;" *ngFor="let item of register_data.directions" value="{{item.recId}}" text-wrap>{{item.direction}}</ion-option>
  </ion-select>
</ion-item>

和我的CSS：

shopping-car-delivery {
    .alert-ios .alert-radio-label{ white-space: pre-wrap !important;}
    .alert-md .alert-radio-label{ white-space: pre-wrap !important;}
    .alert-wp .alert-radio-label{ white-space: pre-wrap !important;}
}

谢谢 ：）

Answer 1

如果您使用 ionic 4，只需将其添加到您的 app.scss 中

.alert-radio-label.sc-ion-alert-md {
  white-space: pre-line !important;
}

.alert-radio-label.sc-ion-alert-ios {
  white-space: pre-line !important;
}

Answer 2

css空白 应该扩展到行前，这样你的.scss就会是

 shopping-car-delivery {
    .alert-ios .alert-radio-label{ white-space: pre-line !important;}
    .alert-md .alert-radio-label{ white-space: pre-line !important;}
    .alert-wp .alert-radio-label{ white-space: pre-line !important;}
}