diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index b6e79dfa2a..6fcdd72694 100644
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -91,6 +91,26 @@
overscroll-behavior-y: contain;
}
+.alert-checkbox-label,
+.alert-radio-label {
+ /**
+ * This allows long words to wrap to the next line
+ * instead of flowing outside of the container.
+ *
+ * The "anywhere" keyword should be used instead
+ * of the "break-word" keyword since the parent
+ * container is using flexbox. Flex relies on min-content and
+ * max-content intrinsic sizes to structure the layout. Flex will
+ * wrap content only until it reaches its min-content intrinsic size
+ * which in this case is equal to the longest word in this container.
+ * "break-word" does not shrink the min-content intrinsic size
+ * of the flex item which causes the long word to still overflow.
+ * "anywhere" on the other hand does shrink the min-content
+ * intrinsic size which allows the long word to wrap to the next line.
+ */
+ overflow-wrap: anywhere;
+}
+
/**
* Scrollbars on mobile devices will be hidden.
* Users can still scroll the content by swiping.
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts
index 3b2c69ce87..eecb703d6f 100644
--- a/core/src/components/alert/test/a11y/alert.e2e.ts
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts
@@ -28,6 +28,59 @@ const testAria = async (
expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
};
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('alert: text wrapping'), () => {
+ test('should break on words and white spaces for radios', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ `,
+ config
+ );
+
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+ const alert = page.locator('ion-alert');
+
+ await alert.evaluate((el: HTMLIonAlertElement) => el.present());
+ await ionAlertDidPresent.next();
+
+ await expect(page).toHaveScreenshot(screenshot(`alert-radio-text-wrap`));
+ });
+ test('should break on words and white spaces for checkboxes', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ `,
+ config
+ );
+
+ const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+ const alert = page.locator('ion-alert');
+
+ await alert.evaluate((el: HTMLIonAlertElement) => el.present());
+ await ionAlertDidPresent.next();
+
+ await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-text-wrap`));
+ });
+ });
+});
+
configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
test.describe(title('alert: a11y'), () => {
test.beforeEach(async ({ page }) => {
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6f15e73829
Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a1b2c2690d
Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..10ee5c877b
Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..83fb54fb47
Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e72d336b21
Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..23ff47068b
Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png differ