From 3c2685f23c8c0750cdb2568e8cf112f150e83a8b Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Fri, 10 Oct 2025 10:53:45 -0400
Subject: [PATCH 1/2] Add word break control

---
 static/app/components/core/text/text.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/static/app/components/core/text/text.tsx b/static/app/components/core/text/text.tsx
index 4c3bd8f1425ea0..9174ef5f19dc7f 100644
--- a/static/app/components/core/text/text.tsx
+++ b/static/app/components/core/text/text.tsx
@@ -84,6 +84,12 @@ export interface BaseTextProps {
    */
   variant?: keyof Theme['tokens']['content'];
 
+  /**
+   * Determines where line breaks appear when wrapping the text.
+   * @default undefined
+   */
+  wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
+
   /**
    * Determines text wrapping.
    */
@@ -132,6 +138,7 @@ export const Text = styled(
   text-overflow: ${p => (p.ellipsis ? 'ellipsis' : undefined)};
   white-space: ${p => (p.wrap ? p.wrap : p.ellipsis ? 'nowrap' : undefined)};
   text-wrap: ${p => p.textWrap ?? undefined};
+  word-break: ${p => p.wordBreak ?? undefined};
   width: ${p => (p.ellipsis ? '100%' : undefined)};
   display: ${p =>
     p.as === 'div'

From 6ed836cd8cb54509fcbd6a33db6be87bdab3a453 Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Fri, 10 Oct 2025 11:03:57 -0400
Subject: [PATCH 2/2] Add documentation

---
 static/app/components/core/text/text.mdx | 34 ++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/static/app/components/core/text/text.mdx b/static/app/components/core/text/text.mdx
index 758462ca34cc2e..91c6cc27e4d3de 100644
--- a/static/app/components/core/text/text.mdx
+++ b/static/app/components/core/text/text.mdx
@@ -202,6 +202,40 @@ Handle text overflow with the `ellipsis` prop to truncate long text with an elli
 </Container>
 ```
 
+## Wrapping
+
+Use the `textWrap` prop to control how the text wraps, and the `wordBreak` prop to control where the text is split during wrapping.
+
+<Storybook.Demo>
+  <Stack gap="md">
+    <Container width="200px" padding="md" border="primary">
+      <Text wordBreak="break-word">
+        A URL string that breaks on word boundaries:
+        https://example.com/path/?marketingParam1=value1&amp;marketingParam2=some-awkward-long-value
+      </Text>
+    </Container>
+    <Container width="200px" padding="md" border="primary">
+      <Text textWrap="balance">
+        Balanced text wrapping for a string of words of varying lengths
+      </Text>
+    </Container>
+  </Stack>
+</Storybook.Demo>
+```jsx
+<Container width="200px" padding="md" border="primary">
+  <Text wordBreak="break-word">
+    A URL string that breaks on word boundaries:
+    https://example.com/path/?marketingParam1=value1&amp;marketingParam2=some-awkward-long-value
+  </Text>
+</Container>
+
+<Container width="200px" padding="md" border="primary">
+  <Text textWrap="balance">
+    Balanced text wrapping for a string of words of varying lengths
+  </Text>
+</Container>
+```
+
 ## Monospace
 
 Use `monospace` for fixed-width text.