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

【问题标题】：ionic 4 "ion-option" text wrapionic 4“离子选项”文本换行
【发布时间】：2018-08-10 20:14:30
【问题描述】：

我正在使用 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;}
}

谢谢:)

【问题讨论】：

您找到解决方案了吗？我也在为此苦苦挣扎。

标签： css ionic-framework

【解决方案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;
}

【讨论】：

【解决方案2】：

将此添加到 app.scss 工作：

ion-label {
   white-space: normal !important;
}

【讨论】：

ionic 4 没有 app.scss 你确定这个解决方案不适用于 Ionic 2/3？

【解决方案3】：

通过覆盖 alert-radio-label.sc-ion-alert-md 、 alert-radio-label.sc-ion-alert-ios 并将空格更新为 page.scss 中的前行来修复它

.alert-radio-label.sc-ion-alert-md {
  padding-left: 52px;
  padding-right: 26px;
  padding-top: 13px;
  padding-bottom: 13px;
  flex: 1;
  color: var(--ion-color-step-850, #262626);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: pre-line;
}

另外，将字体大小减小到 14 像素，因为我的文本大约是 35-40 个字符。

.

【讨论】：

它在 ionic4 中对我有用，你能说明为什么这不起作用吗？
我可以在 Chrome 调试器中修改它并查看结果，但是您在实际代码中在哪里进行此更改？当我将它添加到 .css 时它什么也不做
@D.Hodges 覆盖您的 .scss 中的 alert-radio-label.sc-ion-alert-md 、 alert-radio-label.sc-ion-alert-ios

【解决方案4】：

如果上述解决方案都不起作用，请尝试如下所示的根级 css 更改

   :root {
  ion-popover ion-select-popover ion-radio-group ion-item ion-label{
            white-space: pre-line !important;
  }
}

【讨论】：

经过数小时的搜索，这是使用 ionic 5 和 6 对我有用的唯一解决方案。

【解决方案5】：

css white-space 应该扩展到 pre-line 所以你的 .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;}
}

【讨论】：

【解决方案6】：

如果您使用 Ionic 4，那么只需使用 class="ion-text-wrap" 将文本包装在元素中的任何位置。

Ionic 4 CSS 类参考：- https://ionicframework.com/docs/layout/css-utilities

对于 Ionic 3，您可以使用 class="text-wrap"

【讨论】：

【解决方案7】：

默认情况下，select 使用 AlertController API 打开覆盖警报中的选项。可以更改界面以使用 ActionSheetController API 或 PopoverController API 通过传递 action-sheet 或 popover 分别指向 interface 属性。

要在 ionic 中使用 interface="popover" 自定义离子选择选项，请执行以下操作：

解决方案：在 global.scss(Ionic4) 和 outside page-app 标签中添加代码 app.scss(Ionic3) 这样组件外部可以访问以下 css

.popover-content ion-list ion-label
    {
    font-size:12px !important;
    }

详细说明：

问题在于 ion-select 中的选项被添加为 Popover/Alert/Actionsheet。
用于显示 ion-select 界面的 HTML 代码是在组件之外生成的，即在 ion-router-outlet 组件之外。
因此，您放入组件的 scss 文件中以更改离子选择选项外观的任何代码都不会反映在浏览器中。

示例： DOM 的样子：（Ionic 4）

离子 3

This will change the look of ion-select option throughout the App

为了针对不同的页面对其进行自定义，我通过在主应用选择器中添加和删除自定义类来实现

ionViewDidEnter()
{
let appRoot:any=document.getElementById('myAPP');
this.renderer.setElementClass(appRoot,'customIonSelectCSS',true); //add
}

ionViewDidEnter()
{
let appRoot:any=document.getElementById('myAPP');
this.renderer.setElementClass(appRoot,'customIonSelectCSS',false); //remove
}

【讨论】：

【解决方案8】：

ion-select 正在使用警报来显示选项，因此您需要覆盖默认样式

第一步：

.alert-tappable.sc-ion-alert-md.sc-ion-alert-ios {
    display: contents !important;
}

默认情况下，显示：flex；改成显示：contents !important;

第二步：

.alert-radio-label { white-space:   pre-wrap !important; }

默认情况下，空格：nowrap;将其更改为空白：pre-line !important;

【讨论】：