diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 2f36fe53405..94329434c35 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -426,6 +426,13 @@ button, a { // shrink and wrap its text instead of moving to its // own row if there are slotted elements next to it width: min-content; + + /** + * We allow labels in the default + * slot to grow. However, we do not + * want them to grow indefinitely. + */ + max-width: 100%; } // Item Input diff --git a/core/src/components/label/test/a11y/label.e2e.ts b/core/src/components/label/test/a11y/label.e2e.ts index ce84ec06451..00485eb4d3f 100644 --- a/core/src/components/label/test/a11y/label.e2e.ts +++ b/core/src/components/label/test/a11y/label.e2e.ts @@ -82,3 +82,34 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { }); }); }); + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('label: text wrapping in item'), () => { + test('long text should not cause label to expand infinitely', async ({ page }) => { + await page.setContent( + ` + + + + +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+
+ `, + config + ); + + const item = page.locator('ion-item'); + + await expect(item).toHaveScreenshot(screenshot(`label-item-wrap`)); + }); + }); +}); diff --git a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d8e598922b9 Binary files /dev/null and b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f4a4fa89066 Binary files /dev/null and b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..87856ea01de Binary files /dev/null and b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Safari-linux.png differ