Question

我正在使用Ionic 4，尝试在“ ion-select”中进行文本换行时遇到问题

我的选择如下：

如果我直接将Google Chrome中的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

通过覆盖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;
}

另外，由于我的文字大约为35-40个字符，因此将字体大小减小为14px。

。

Answer 2

css white-space应该扩展到 pre-line ，这样您的String应该是

Person

Answer 3

将其添加到app.scss起作用了

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

Answer 4

如果使用离子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 5

如果您使用的是Ionic 4，则只需使用DevDays = sumx(contract, datediff(contract[Start], [UseEvalDate], day))即可将元素中的文字换行。

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

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

Answer 6

默认情况下，select使用AlertController API打开叠加层警报中的选项。界面可以更改为使用 ActionSheetController API 或 PopoverController API 动作表或弹出框分别指向界面属性。

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

解决方案：将代码添加到 global.scss（Ionic4）中，并将外部页面应用标签添加到app.scss（Ionic3）中，在组件外部可以访问以下css

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

详细说明：

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

示例：DOM的外观：（离子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
}

Answer 7

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;将其更改为空格：前行！important;

Answer 8

如果以上解决方案均不起作用，请尝试如下所示的root级css更改

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

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

8 个答案: