[fix] Text preserves white-space if numberOfLines={1}

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 #2058
This commit is contained in:
Evan Charlton
2021-06-16 11:06:26 +02:00
committed by Nicolas Gallagher
parent d48f630600
commit ab98851881
4 changed files with 29 additions and 5 deletions
+16 -3
View File
@@ -370,17 +370,30 @@ export default function TextPage() {
</Text>
<View style={{ maxWidth: 320 }}>
<Text numberOfLines={1}>
<View style={{ borderColor: '#cecece', borderWidth: 1, marginVertical: 20 }}>
<Text style={{ fontWeight: 700 }}>The next two lines should look identical:</Text>
<View style={{ display: 'flex', flexDirection: 'row' }}>
<Text numberOfLines={1}>Spaces </Text>
<Text numberOfLines={1}>between</Text>
<Text numberOfLines={1}> words</Text>
</View>
<View style={{ display: 'flex', flexDirection: 'row' }}>
<Text>Spaces </Text>
<Text>between</Text>
<Text> words</Text>
</View>
</View>
<Text numberOfLines={1} style={{ marginBottom: 20 }}>
Maximum of one line, no matter how much I write here. If I keep writing, it
{"'"}
ll just truncate after one line.
</Text>
<Text numberOfLines={2} style={{ marginTop: 20 }}>
<Text numberOfLines={2} style={{ marginBottom: 20 }}>
Maximum of two lines, no matter how much I write here. If I keep writing, it
{"'"}
ll just truncate after two lines.
</Text>
<Text style={{ marginTop: 20 }}>
<Text style={{ marginBottom: 20 }}>
No maximum lines specified, no matter how much I write here. If I keep writing, it
{"'"}
ll just keep going and going.