fix(item): label does not expand indefinitely (#28700)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->


While working on an unrelated task, I noticed the list items in the list
starter app run off the page. This is due to the text wrapping behavior
in v7.6 where we allows the labels to grow/shrink. However, we do not
set a limit on how much they can grow. This means that child elements
inside of `ion-label` with long text can cause the label container to
grow indefinitely.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Labels in item have a max-width of 100%

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.6.1-dev.11702498225.1ad6eda6`

| before | after |
| - | - |
| ![localhost_8102_home(Samsung Galaxy
S8+)](https://github.com/ionic-team/ionic-framework/assets/2721089/cadf8c5f-5813-4c8d-b236-752fde3d37cc)
| ![localhost_8102_home(Samsung Galaxy S8+)
(1)](https://github.com/ionic-team/ionic-framework/assets/2721089/ccb4277c-046d-46f8-b7f8-eda63c72fdb9)
|

---------

Co-authored-by: ionitron <[email protected]>

Author: liamdebeasi

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

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(
+        `
+        <style>
+          div {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+        </style>
+        <ion-item>
+          <ion-label>
+            <!-- This text should be truncated with ellipses -->
+            <div>
+              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.
+            </div>
+          </ion-label>
+        </ion-item>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`label-item-wrap`));
+    });
+  });
+});