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

Posted 2023-02-21

【中文标题】ionic-4 离子选择选项上的文本换行

【英文标题】：ionic-4 Text-wrap on ion-select-option

【发布时间】：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

【参考方案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 文件夹中。检查此以获取更多信息***.com/questions/60212805/…

谢谢！你的回答教会了我一些新概念！我在 app.scss 中添加了代码，它工作正常。