Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Using the new modern syntax for <ion-checkbox>, the label text will get truncated if it's too long, and there is no way to make it visible.

<ion-item>
  <ion-checkbox
    mode="md"
    justify="space-between"
    (ionChange)="handleReasonSelect($event, reason.id)"
  >{{ reason.name }}</ion-checkbox>
</ion-item>

Result:

There doesn't appear to be any selector that will allow me to force the text to wrap. I've tried lots of variations of the following:

ion-checkbox .label-text-wrapper {
  white-space: normal !important;
}

There aren't any custom properties or shadow parts I can use to target the label.

Expected Behavior

There should be a custom css property or some way that I can make the label wrap so the full text is visible.

Steps to Reproduce

Using ionic v7, use ion-checkbox with the modern label syntax in a constrained width, (eg a mobile device) and add a long label.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1
Ionic Framework : @ionic/angular 7.0.5
@angular-devkit/build-angular : 14.2.11
@angular-devkit/schematics : 14.2.11
@angular/cli : 14.2.11
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 4.8.0
@capacitor/android : 4.8.0
@capacitor/core : 4.8.0
@capacitor/ios : 4.8.0

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v16.18.1
npm : 8.19.2
OS : macOS Unknown

Additional Information

No response