ionic-4 离子选择选项上的文字换行

Question

HTML

<ion-item>
    <ion-label>Popover</ion-label>
    <ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
      <ion-select-option value="brown" text-wrap>Brownasdfasdfasdfasdfadfadsfasdfadfasdfafdsadfaf</ion-select-option>
      <ion-select-option value="blonde">Blonde</ion-select-option>
      <ion-select-option value="black">Black</ion-select-option>
      <ion-select-option value="red">Red</ion-select-option>
    </ion-select>
  </ion-item>

SASS：

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

我无法覆盖现有的

white-space: nowrap

我想知道如何覆盖 shadow-dom css

Answer 1

在 Ionic 5 上，唯一对我有用的是：

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

Answer 2

因为这个 web 组件没有属性，所以这确实有点困难和混乱

global.scss:

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

//or just 

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

这会否决组件样式类。

Answer 3

在你的 global.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 4

编辑资产/global.scss：

/* <ion-select multiple="true" ... */
.alert-checkbox-label.sc-ion-alert-md,
.alert-checkbox-label.sc-ion-alert-ios {
  white-space: normal !important;
}

/* <ion-select multiple="false" ... */
.alert-radio-label.sc-ion-alert-md,
.alert-radio-label.sc-ion-alert-ios {
  white-space: normal !important;
}

测试于

"@ionic/angular": "6.1.2"

Answer 5

这在 Ionic V5.4.15 上对我有用：

.alert-checkbox-label.sc-ion-alert-ios{
    white-space: pre-line !important;
    padding-top: 4px;    
}

Answer 6

我已经将它添加到我的

global.scss

文件中，它似乎运行良好。

.alert-radio-button {
  height: auto !important;
}

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

我只在 iOS 模拟器中测试过它，而不是在真正的 iOS 设备或 Android 设备或模拟器上。

Answer 7

对于离子 5

.alert-checkbox-label{
  white-space: normal !important;
}

.alert-tappable.sc-ion-alert-md {
  height: initial !important;
  contain: initial !important;
}

Answer 8

你可以在你的 global.scss 中添加它

.alert-tappable.alert-radio {
 height: auto;
 contain: content; 
}

.alert-radio-label.sc-ion-alert-md, .alert-radio-label.sc-ion-alert-ios {
  white-space: normal; 
}

Answer 9

为每个选择选项添加一个类，然后从 global.scss 中定位它。

HTML

• 我会为每个离子选择选项添加一个

  text-wrap

  类：

   <ion-select
    placeholder="select your option"
    interface="popover"
    (ionChange)="handleChange($event)">
    <ion-select-option class="text-wrap" *ngFor="let entry of this.dropDownList" value="{{entry}}">{{entry}}</ion-select-option>
  </ion-select>
  

global.scss

这里我针对那个

text-wrap

类：

   ion-popover ion-select-popover {
     ion-item.text-wrap ion-label {
        white-space: normal !important;
     }
   }

Answer 10

你应该使用内置的CSS实用程序类

.ion-text-wrap

：

<ion-label class="ion-text-wrap">Very long label...</ion-label>