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

由于该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 2

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

您应该使用内置的 CSS Utilities 类 .ion-text-wrap：

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

Answer 4

这对我适用于Ionic V5.4.15：

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

Answer 5

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

Project.aggregate([
  { $match: { _id: mongoose.Types.ObjectId(id) } },
  {
    $project: {
      name: 1,
      deadline: 1,
      Users: {
        $filter: {
          input: "$Users",
          as: "user",
          cond: {
            $and: [
              {
                $eq: ["$$user.User", mongoose.Types.ObjectId(decoded._id)],
              },
              { $gte: ["$$user.access", authStatus] },
            ],
          },
        },
      },
    },
  },
])
  .then((result) => {
    // Aggregate method only returns an array, since we are doing a $match based on _id, 
    // we can take the first element in the array if present
    if (result && result.length) {
      console.log(result[0]);
    }
  })
  .catch((err) => {
    console.log(err);
  });

ionic-4自动换行

5 个答案: