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

(内容来自百度AI问答)

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


核心代码

复制代码

javascriptCopy Code

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


关键属性说明

  1. ‌**numberOfLines={3}**‌

    • 限制文本最多显示 ‌3 行‌,超出部分截断。
  2. ‌**ellipsizeMode="middle"**‌

    • 指定省略号位置为 ‌中间 ‌(其他可选值:headtailclip)。
  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。
相关推荐
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust8 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
全宝9 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele9 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮10 小时前
【无标题】
开发语言·前端·javascript
fie888910 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式