react native text 显示 三行 超出部分 中间使用省略号

(内容来自百度AI问答)

在 React Native 中，要实现 ‌Text 组件显示三行，超出部分中间使用省略号‌，可以通过以下方式实现：

‌核心代码‌

javascriptCopy Code

<Text numberOfLines={3} ellipsizeMode="middle" style={{ /* 可选样式 */ }} > 这是一段需要截断的长文本，当超过三行时会在中间显示省略号... </Text>

‌关键属性说明‌

1. ‌numberOfLines={3}‌

   • 限制文本最多显示 ‌3 行‌，超出部分截断。

2. ‌ellipsizeMode="middle"‌

   • 指定省略号位置为 ‌中间‌（其他可选值：head、tail、clip）。

3. ‌样式补充‌（可选）

   • 确保容器宽度固定（如 width: '100%'），避免布局问题。

‌注意事项‌

• ‌iOS/Android 兼容性‌：ellipsizeMode 在两端均支持，但部分 Android 版本可能需要额外测试13。
• ‌嵌套 Text 组件‌：若文本包含嵌套样式，需确保外层 Text 设置 numberOfLines2。

‌完整示例‌

javascriptCopy Code

import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const App = () => { return ( <View style={styles.container}> <Text numberOfLines={3} ellipsizeMode="middle" style={styles.text} > 这是一段非常长的文本，用于测试三行截断并在中间显示省略号的效果。如果文本超过三行，中间部分会被替换为... </Text> </View> ); }; const styles = StyleSheet.create({ container: { padding: 20, width: '100%' }, text: { fontSize: 16, lineHeight: 24 } }); export default App;

‌效果说明‌

• 文本超出 3 行时，‌中间内容‌会被替换为 ...（如 "这是一段...省略号的效果"）。
• 若需省略号在末尾，改用 ellipsizeMode="tail"3。