时间戳

首页 > 解决方案 > 如何在离子可选中添加自动换行？

ionic-framework - 如何在离子可选中添加自动换行？

问题描述

我在我的离子应用程序中使用离子可选插件。有时，我的部分区域中会出现较长的文本，这些文本会被截断，然后是 ... 。

离子项目的视图

我已经能够将 ionic-selectable 插件中的 css 添加到我的 global.scss

@import '~ionic-selectable/esm5/ionic-selectable.component.min.css';

.ionic-selectable-item-is-selected,.ionic-selectable-item-is-disabled {
  color:#ff0000 !important;
}

.ionic-selectable-value {
  overflow-wrap: break-word; // does not work
  font-size: 10px; 
  text-size-adjust: 10%; // does not work
}


.ionic-selectable-item {
  overflow-wrap: break-word; // does not work
  min-height: 20px;
  font-size: 10px;
}

html

<ion-item>
  <ion-label  position="stacked" class="ion-text-wrap" >{{ 'NEW.dept' | translate }}</ion-label>
  <ionic-selectable
    placeholder="{{ 'NEW.selectdept' | translate }}"
    name="business"
    class="form-control"
    [(ngModel)]="selectedBusiness"
    [items]="list"
    itemValueField="name"
    itemTextField="name"
    [canSearch]="true">
  </ionic-selectable>
</ion-item>

插件链接

https://github.com/eakoriakin/ionic-selectable

我已经能够编辑字体大小、颜色等。但我无法添加自动换行或自动文本大小以适应 div.ionic-selectable-value。

任何帮助将不胜感激。

标签： ionic-framework

解决方案

这不再有效

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

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

更新的答案是

.item.sc-ion-label-md-h, .item .sc-ion-label-md-h{
  white-space: normal !important;
 }

.item.sc-ion-label-ios-h, .item .sc-ion-label-ios-h{
  white-space: normal !important;
}

这变成了空白：nowrap 是真正的罪魁祸首

推荐阅读