ionic-4 文本环绕 ion-select-option

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;
   }
}

I'm not able to override the existing white-space: nowrap

I would like to know how to override the shadow-dom css

Answer 1

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

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 2

这对我适用于 Ionic V5.4.15：

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

Answer 3

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

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

Answer 4

在您的 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 5

你应该使用内置 CSS Utilities class .ion-text-wrap:

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

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; 
}

ionic-4 文本环绕 ion-select-option

ionic-4 Text-wrap on ion-select-option

css

shadow-dom

ionic4