离子离子选择，离子选择选项答案

【问题标题】：Ionic ion-select, ion-select-option离子离子选择，离子选择选项
【发布时间】：2021-05-15 17:36:15
【问题描述】：

我创建了一个带有电容器的新项目 ionic。我使用使用离子选择，但我有我新的离子选择选项（按）大文本，而不是在输入中分布。

<ion-item>
  <ion-label class="my-label" position="stacked">Plaga/Enfermedad</ion-label>
  <ion-select >
    <ion-select-option value="Alternaria, Mancha marrón de las mandarinas (primavera)">Alternaria, Mancha marrón de las mandarinas (primavera)
    </ion-select-option>

  </ion-select>
</ion-item>

如何更改此属性以查看所有文本。显示我的图像

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

感谢您的帮助。我尝试这种方式它的工作 // 离子 6 版本

ion-select::part(text) {
    white-space: normal !important;
    transform: none !important;
}

【讨论】：

【解决方案2】：

要在ion-select 中显示所有文本，您可以在ion-select-option 上使用ion-text-wrap 类。此类由 Ionic CSS 实用程序 (https://ionicframework.com/docs/layout/css-utilities) 提供。您的代码应如下所示：

<ion-item>
  <ion-label class="my-label" position="stacked">Plaga/Enfermedad</ion-label>
  <ion-select >
    <ion-select-option class="ion-text-wrap" value="Alternaria, Mancha marrón de las mandarinas (primavera)">Alternaria, Mancha marrón de las mandarinas (primavera)
    </ion-select-option>
  </ion-select>
</ion-item>

编辑：似乎ion-text-wrap 类没有将文本包装在ion-select 文本框中。由于该元素位于 shadowroot 中，因此您需要使用一些 javascript 来动态应用样式。

所以你需要先给你的ion-select 组件一个#id 并为(ionChange) 事件添加一个回调：

<ion-item text-wrap>
    <ion-label class="my-label" position="stacked">Plaga/Enfermedad</ion-label>
    <ion-select (ionChange)="editShadowStyle()" id="my-select">
        <ion-select-option value="Alternaria, Mancha marrón de las mandarinas (primavera)">Alternaria,
            Mancha
            marrón de las
            mandarinas (primavera)
        </ion-select-option>
    </ion-select>
</ion-item>

然后，在你的打字稿文件中，定义这个函数：

editShadowStyle() {
    let textbox = document
      .getElementById("my-select")
      .shadowRoot.querySelector("div");
    textbox.setAttribute("style", "white-space:pre-line");
}

这样，每次您在ion-select 中选择一个选项时，都会编辑shadowroot 元素样式。请看下面的结果：https://stackblitz.com/edit/ionic-v4-fztn1b?file=src/app/app.component.ts

【讨论】：

感谢您的帮助，但结果相同，文本被裁剪
@ProgramaClases 请看我上面的编辑，我找到了解决方法