Ionic 7标签与输入框文本换行方法求助（旧方案已失效）

针对你遇到的新版本Ionic中ion-input长标签无法换行的问题，以下是两种可行方案：

方案一：通过 ::part 穿透 Shadow DOM 设置样式 #

新版本Ionic组件基于Shadow DOM构建，可利用::part选择器直接访问ion-input内部的label元素：

SCSS 代码：

ion-input.custom {
  --background: #373737;
  --color: #fff;
  --padding-end: 10px;
  --padding-start: 10px;
  --placeholder-color: #ddd;
  --placeholder-opacity: 0.8;

  // 强制标签文本换行
  &::part(label) {
    white-space: normal !important;
    text-align: start; // 可选，调整文本对齐方式
  }
}

HTML 代码：

<ion-input class="custom" label="Long Long Long Text Here That Needs to Wrap Automatically"></ion-input>

方案二：使用自定义 Slot 实现灵活标签布局 #

如果需要更灵活的标签样式控制，可通过slot="label"自定义标签内容：

HTML 代码：

<ion-input class="custom">
  <div slot="label" class="wrapped-label">Long Long Long Text Here That Needs to Wrap Automatically</div>
</ion-input>

SCSS 代码：

ion-input.custom {
  --background: #373737;
  --color: #fff;
  --padding-end: 10px;
  --padding-start: 10px;
  --placeholder-color: #ddd;
  --placeholder-opacity: 0.8;
}

.wrapped-label {
  white-space: normal;
  text-align: start;
  // 可添加更多自定义样式，比如字体大小、颜色等
}

说明 #

之前尝试的--white-space变量无效，是因为Ionic并未将该变量暴露给ion-input的内部label元素，因此需要直接针对label元素设置样式。

内容的提问来源于stack exchange，提问作者Thomas Degroot