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
相关推荐
__zRainy__21 分钟前
Node.js Web 框架选型指南:从 Express 到 Hono 的全景对比
前端·node.js·express·koa·nestjs·egg·fastify
西瓜有点饿29 分钟前
PostCSS 和 UnoCSS 的作用和区别
前端·postcss
伟大的兔神1 小时前
我做了一个本地优先的 AI 图片工作台:Loomora v1.0.0 正式发布
前端·javascript·vue.js
90后的晨仔2 小时前
uni-app项目 Vue3 状态管理 Pinia 完全指南:从概念到实战的深度解析
前端
90后的晨仔3 小时前
uni-app 在 iOS 平台跳转页面时移除底部安全区域的完整技术指南
前端
用户938515635073 小时前
React + JWT 登录鉴权底层原理与工程化实践
前端·react.js
zww89491113 小时前
家政派单系统开发实战:架构设计与派单算法指南
前端·系统架构
fangzhanpeng1683 小时前
(前端)2.js变量作用域样例
开发语言·前端·javascript
赵广陆3 小时前
企业实战:web服务集成
前端·pycharm·fastapi
demo007x4 小时前
Hermes-Agent 技术架构
前端·后端·agent