#css #react-native #flexbox
#css #react-native #flexbox
Вопрос:
В React native я пытаюсь добавить многоточие в длинный текст. Ограничение numberOfLines={1} не помогает, если в противном случае не используется max-width или width для текстового компонента. Но я хотел бы добиться многоточия без указания ширины, то есть текстовый компонент должен просто использовать доступную ширину и отображать многоточие для длинного текста. Можно ли этого добиться с помощью гибких стилей? Пожалуйста, помогите.
<TouchableOpacity style={{{ height: 82, paddingTop: 12 }}>
<View style={{flex: 1,
flexDirection: "row",
left: 16,
alignItems: "center",
justifyContent: "space-between",}}>
<View style={{height:32, width:32}}/>
<View style={{ flexDirection: "column" }}>
<View style={{ flex: 1}}>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION, really a very long description</Text>
</View>
<Text>
{"Final"}
</Text>
</View>
</View>
</TouchableOpacity>
Ответ №1:
Вот ваш ответ:
<TouchableOpacity style={{ height: 82, paddingTop: 12 }}>
<View style={{
flex: 1,
flexDirection: "row",
paddingLeft: 16,
alignItems: "center",
justifyContent: "space-between",
}}>
<View style={{ height: 32, width: 32 }} />
<View style={{ flex: 1 }}>
<View>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION, really a very long description</Text>
</View>
<Text>
{"Final"}
</Text>
</View>
</View>
</TouchableOpacity>
Ответ №2:
Из быстрого теста ваш <Text>
файл фактически уже вырезан, но вы не можете его увидеть из-за этого left
стиля в оболочке <View>
.
Измените это на либо paddingLeft: 16
или marginLeft: 16
, и вы сможете увидеть многоточие.
Комментарии:
1. согласен, левый также вызывал проблему