RN溢出显示省略号代码

js 复制代码
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

const App = () => {
  return (
    // 可以在父标签加宽度限制
    <View style={styles.container}>
      {/* 也可以自己给宽度限制,简单来说就是只要给text限制宽度就行,没宽度就参考父标签宽度 */}
      <Text style={{ width: 300 }} numberOfLines={1} ellipsizeMode="tail">
        这是一段可能会溢出的文本,设置了显示省略号。
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // width: 300,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

export default App
相关推荐
vortex57 小时前
ASP vs ASP.NET vs ASP.NET Core:三代微软 Web 技术核心区别解析
前端·microsoft·asp.net
Apifox7 小时前
如何在 Apifox 中使用「模块」合理地组织接口
前端·后端·测试
冰暮流星7 小时前
css之flex属性
前端·css
若安程序开发7 小时前
WEBweb前端OPPO手机商城网站项目
前端·智能手机
范德萨_7 小时前
JavaScript 实用技巧(总结)
开发语言·前端·javascript
执携7 小时前
Vue Router (匹配当前路由的链接和类名配置)
前端·javascript·vue.js
若安程序开发7 小时前
web华为商城前端项目4页面
前端·华为
一枚前端小能手7 小时前
🏷️ HTML 属性参考 - 常用与全局属性的行为、兼容性与最佳实践
前端·javascript·html
付十一8 小时前
更新!Figma MCP + Cursor:大前端时代的UI到代码自动化
android·前端·ai编程
万岳科技程序员小金8 小时前
多端统一的教育系统源码开发详解:Web、小程序与APP的无缝融合
前端·小程序·软件开发·app开发·在线教育系统源码·教育培训app开发·教育培训小程序