Skip to content
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.

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

Text maxWidth doesn't work as expected when numberOfLines is set #1223

Closed
brunolemos opened this issue Jan 6, 2019 · 1 comment
Closed
Assignees
Milestone

Comments

@brunolemos
Copy link
Contributor

The problem

Second line has maxWidth: 50 (half), but it has no effect on web:

How to reproduce
Simplified test case: https://codesandbox.io/s/pow2zr00j

<View style={{ width: 100, height: 200, backgroundColor: "green" }}>
  <Text numberOfLines={1}>aaa aa aaaaaaaa aaaaaa aaaaa aaaaa</Text>
  <Text numberOfLines={1} style={{ maxWidth: 50 }}>bbbb bbbbb bbbbbbbbb bbbbb bbbbb bbbbbb</Text>
  <Text style={{ maxWidth: 50 }}>ccccc cccccc cccccc cccccc</Text>
</View>

Expected behavior

https://snack.expo.io/@brunolemos/react-native-web-text-max-width

image

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): Latest
  • React (version): Latest
  • Browser: Chrome
@brunolemos
Copy link
Contributor Author

Current workaround

Wrap the <Text> with a <View style={{ maxWidth: X }}>.

@necolas necolas added this to the 0.10.0 milestone Jan 11, 2019
@necolas necolas modified the milestones: 0.10.0, 0.11.0 Jan 30, 2019
@necolas necolas self-assigned this Mar 7, 2019
necolas added a commit that referenced this issue Mar 8, 2019
The CSS base styles for certain primitives are implemented using classic CSS to
reduce browser layout times and better support 'null' values in
StyleSheet-defined styles. Combined with the previous patch this reduces the
benchmark layout times by about 30%.

Ref #1136
Fix #1044
Fix #1223
Fix #13
@necolas necolas added the has-PR label Mar 8, 2019
necolas added a commit that referenced this issue Mar 11, 2019
The CSS base styles for certain primitives are implemented using classic CSS to
reduce browser layout times and better support 'null' values in
StyleSheet-defined styles. Combined with the previous patch this reduces the
benchmark layout times by about 30%.

Ref #1136
Fix #1044
Fix #1223
Fix #13
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

No branches or pull requests

2 participants