Skip to content

fix: Set white-space to pre for single-line Text#2058

Closed
evancharlton wants to merge 1 commit intonecolas:masterfrom
evancharlton:white-space-pre
Closed

fix: Set white-space to pre for single-line Text#2058
evancharlton wants to merge 1 commit intonecolas:masterfrom
evancharlton:white-space-pre

Conversation

@evancharlton
Copy link
Contributor

By default, the Text component is rendered with white-space: pre-wrap
in order to keep meaningful whitespace behavior. When a Text component
had numberOfLines={1} set, word-wrapping was disabled by changing it
to specify white-space: nowrap.

However, nowrap removes the meaningful whitespace behavior. Instead,
use the pre value to maintain the leading and trailing whitespaces of
strings.

Before After
image image

References: MDN's white-space page

By default, the Text component is rendered with `white-space: pre-wrap`
in order to keep meaningful whitespace behavior. When a Text component
had `numberOfLines={1}` set, word-wrapping was disabled by changing it
to specify `white-space: nowrap`.

However, `nowrap` removes the meaningful whitespace behavior. Instead,
use the `pre` value to maintain the leading and trailing whitespaces of
strings.

Source: [MDN's white-space page][white-space docs]

[white-space docs]: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
necolas pushed a commit that referenced this pull request Jun 17, 2021
Preserve meaningful white-space when `numberOfLines={1}` by using the `pre` value instead of `nowrap`.

Source: [MDN's white-space page][white-space docs]

[white-space docs]: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Close #2058
@necolas necolas closed this in ab98851 Jun 17, 2021
@evancharlton evancharlton deleted the white-space-pre branch June 18, 2021 07:36
necolas added a commit that referenced this pull request Mar 1, 2022
Reverts the change made for #2058, which is considered an avoidable
edge-case.

Fix #2243
rnike pushed a commit to VeryBuy/react-native-web that referenced this pull request Sep 13, 2022
Preserve meaningful white-space when `numberOfLines={1}` by using the `pre`
value instead of `nowrap`.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Close necolas#2058
rnike pushed a commit to VeryBuy/react-native-web that referenced this pull request Sep 13, 2022
Reverts the change made for necolas#2058, which is considered an avoidable
edge-case.

Fix necolas#2243
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