Skip to content

feat: Add wordBreak prop to Text element #101340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 10, 2025
Merged

feat: Add wordBreak prop to Text element #101340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c2685f
Add word break control
gggritso Oct 10, 2025
6ed836c
Add documentation
gggritso Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions static/app/components/core/text/text.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
7 changes: 7 additions & 0 deletions static/app/components/core/text/text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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'
Expand Down
Loading