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。
相关推荐
带娃的IT创业者2 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
二十雨辰3 小时前
vite如何处理项目中的资源
开发语言·javascript
四月_h5 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate5 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古6 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers
疯狂踩坑人7 小时前
【万字长文】让面试没有难撕的JS基础题
javascript·面试
极客小俊8 小时前
【浅谈javascript禁术】 eval函数暗藏玄机?
javascript
李明卫杭州8 小时前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-9 小时前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
小*-^-*九9 小时前
Electron vue项目 打包 exe文件2
javascript·vue.js·electron