超文本標記語言

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

薩斯:

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

我無法覆蓋現有的空白:nowrap

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

在Ionic 5上，唯一對我有用的是:

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

因為這個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;
}

這將覆蓋組件樣式類。

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

編輯assets/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;
}

測試于& quot@ ionic/angular & quot；:& quot6 . 1 . 2 & quot；

這在Ionic V5.4.15上對我有效:

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

我已經把它添加到我的global.scss文件中，看起來效果不錯。

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

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

我只在iOS模擬器中測試過，沒有在真正的iOS設備或Android設備或模擬器上測試過。

對于離子5

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

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

您可以將其添加到您的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; 
}

給每個選項添加一個類。然后從global.scss定位。

超文本標記語言 我將為每個離子選擇選項添加一個文本換行類:

<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 這里我針對的是文本換行類:

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

對于Ionic版本7

為了正確地做到這一點，您需要打開您的開發工具，查看選擇中的選項的類，并找到一個只與選擇和編寫全局或組件范圍css相關的類，以指定的類為目標，覆蓋一些屬性和/或添加新的屬性。有時你沒有直接的類來定位特定的元素，所以你需要找到一個唯一的標簽名，并使用css選擇器來選擇目標。

注意:我使用的是interface = & quot行動表& quot作為select的屬性，對于其他類型的接口，解決方案可能有所不同

/* This part is for the place holder when the select is not open */
ion-select::part(placeholder),
ion-select::part(text) {
    white-space: normal !important;
}

/* This part is for option text when you open the select */
.select-interface-option span {
    white-space: normal !important;
}

你應該使用內置的CSS工具類。離子文字換行:

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