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。
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8508 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
今禾10 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句10 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
码间舞10 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀10 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce12 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript