ionic-4 离子选择选项上的文本换行答案

【问题标题】：ionic-4 Text-wrap on ion-select-optionionic-4 离子选择选项上的文本换行
【发布时间】：2019-10-06 16:13:06
【问题描述】：

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

【问题讨论】：

标签： css ionic4 shadow-dom

【解决方案1】：

您可以在 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; 
}

【讨论】：

【解决方案2】：

对于离子 5

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

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

【讨论】：

【解决方案3】：

我已将此添加到我的 global.scss 文件中，并且它似乎运行良好。

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

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

我只在 iOS 模拟器上测试过，没有在真正的 iOS 设备或 Android 设备或模拟器上测试过。

【讨论】：

【解决方案4】：

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

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

【讨论】：

这不适用于离子选择选项
是的，你是对的。但这可以应用于复选框标签。离子选择标签的高度限制为 44px，只适合两行。

【解决方案5】：

在你的 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;
}

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

由于这个网络组件没有属性，这确实让这有点困难和混乱

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

这会否决组件样式类。

【讨论】：

我的 ionic 4 项目中没有 global.css
你不应该有一个 global.css。你应该有一个 global.scss。它位于 /src/global.scss 文件夹中。检查此以获取更多信息stackoverflow.com/questions/60212805/…
谢谢！你的回答教会了我一些新概念！我在 app.scss 中添加了代码，它工作正常。