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。
相关推荐
郝学胜-神的一滴18 分钟前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
摸着石头过河的石头2 小时前
错误处理:构建健壮的 JavaScript 应用
前端·javascript
Asort2 小时前
JavaScript设计模式(十九)——观察者模式 (Observer)
前端·javascript·设计模式
前端付豪2 小时前
为啥升Vue3 有啥优势?
前端·javascript·vue.js
举个栗子dhy2 小时前
第四章、路由配置
前端·javascript·react.js
用户84298142418102 小时前
Node.js:JavaScript的服务器端革命
javascript
小高0072 小时前
instanceof 和 typeof 的区别:什么时候该用哪个?
前端·javascript·面试
im_AMBER2 小时前
React 03
前端·笔记·学习·react.js·前端框架·react
豆苗学前端3 小时前
JavaScript原型对象、构造函数、继承与类详解
前端·javascript·后端
参宿73 小时前
图解Vue3 响应式,手动实现核心原理
前端·javascript·vue.js