Skip to content

Allow vertical overflow for Text with numberOfLines={1}#2836

Open
mozzius wants to merge 4 commits intonecolas:masterfrom
mozzius:samuel/numberoflines-1-overflow-y
Open

Allow vertical overflow for Text with numberOfLines={1}#2836
mozzius wants to merge 4 commits intonecolas:masterfrom
mozzius:samuel/numberoflines-1-overflow-y

Conversation

@mozzius
Copy link
Contributor

@mozzius mozzius commented Mar 23, 2026

Setting numberOfLines on Text causes the text to get clipped in both axis, which means if you have a smaller line height it might clip ascenders/descenders. Exaggerated example:

Screenshot 2026-03-23 at 12 28 43

The fix is to use overflow-inline: clip instead of overflow: hidden, so that it just clips it in the horizontal axis. This matches React Native's behaviour on iOS/Android. Unfortunately this only works for single-line clamps - to my knowledge it's unfixable for multi-line clamps.

Screenshot 2026-03-23 at 12 28 14

overflow-inline is baseline newly available, if that's a problem we could use overflow-x: clip instead. However, that wouldn't support vertical writing modes :/. If that's an unreasonable compromise, feel free to put this PR on ice for however many years it takes to become widely available :)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 23, 2026

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e3e5f28:

Sandbox Source
react-native-web-examples Configuration

@mozzius
Copy link
Contributor Author

mozzius commented Mar 23, 2026

Dammit I did not mean to link these PRs together

@mozzius mozzius reopened this Mar 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant