How do I wrap text in ionic 7 labels or inputs as pervious answers no longer work

In previous versions of ionic you could use <ion-label class="ion-text-wrap"

or

.item.sc-ion-label-md-h, .item .sc-ion-label-md-h{
  white-space: normal !important;
 }

 .item.sc-ion-label-ios-h, .item .sc-ion-label-ios-h{
   white-space: normal !important;
 }

Here are some examples of what the ionic docs say

html

<ion-input class="custom" label="Long Long Long Text Here"></ion-input>

scss

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

I tried adding

--white-space: normal !important;

ionic seems to be moving away from

<ion-label>Label Here</ion-label>

Any help would be appreciated.

I faced the same issue, and here is what I came up with:

1. For consistency, I added the built-in ion-text-wrap class to the elements whose label I want to be wrapped, e.g., ion-input or ion-textarea.
2. And I added the following rule to global.scss:

[label].ion-text-wrap .label-text-wrapper > .label-text {
    white-space: normal;
}

It helped me, and I hope it will help you too.