react native Text 只显示几个字，超出显示省略号

最新推荐文章于 2024-08-06 19:00:26 发布
最新推荐文章于 2024-08-06 19:00:26 发布
阅读量1.2w 收藏 4
点赞数
分类专栏： react native 文章标签： react native 超出显示省略号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lx_1024/article/details/82147492
版权

这个需求的实现很神奇，Text自己有一个属性 numberOfLines ，可以控制超出几行会显示省略号，但是这个属性不满足项目需求，只能自己造一个，虽然有点low的感觉，但是好歹实现了。

<Text>
  {title ? (title.length > 5 ? title.substr(0, 5) + "..." : title) : ""}
</Text>

title是定义在state里的。

lx_1024
关注
专栏目录
react-native Text 多余的字数隐藏，并用省略号显示
像树的博客
04-07 3740
参考 https://reactnative.cn/docs/text#numberoflines numberOfLines 用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。 此属性一般和ellipsizeMode搭配使用。 ellipsizeMode 这个属性通常和下面的 numberOfLines 属性配合使用，表示当 Text 组件无法全部显示需要...
Sentry For React 完整接入详解(2021 Sentry v21.8.x)前方高能预警！三万字，慎入！
o__cc的博客
09-06 2097
内容源于：https://docs.sentry.io/platforms/javascript/guides/react/ 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps 脑图 公众号：黑客下午茶 快速开始 Sentry 的 React SDK 支持自动...
React Native 指定文字行数，超出行数显示更多
vv_bug
09-05 1万+
纯属于工具类，简单的说一下原理， 1、在不给text设置numberOfLines的时候计算出text的高度。 2、给text一个特定的numberOfLines，然后再次计算高度。 3、比较两次获取的高度，如果第二次获取的高度<最大高度，说明需要换行，回调给页面。 4、页面通过回调知道需不需要显示“加载更多操作”。用法：<MutiRowText st
CSS文字超出显示省略号
最新发布
weixin_46021619的博客
08-06 1056
【代码】CSS文字超出显示省略号。
React-Native Text组件重新渲染时会文字超出屏幕的问题
-霄-的博客
11-07 3459
React-Native Text组件重新渲染时会文字超出屏幕的问题 今天在开发中碰到一个很奇怪的问题就是初次渲染的时候Text组件里的文字会正常换行，一切看起来都很和谐，但是当我滚动scrollview引起重新渲染的时候，灵异事件发生了，这个Text里本来的两行文字，却诡异的变成了一行，超出了屏幕。在上网搜了很久无果的情况下，自己去排查发现是“fontFamily”属性设的平方字体的问题，我把f...
react实现多行文本超出加省略号
weixin_39037804的博客
08-15 1071
http://www.css88.com/archives/5206 overflow : hidden; text-overflow: ellipsis; display: -webkit-box;...
react native text显示过长后......
weixin_33928467的博客
01-17 517
添加一句解决 numberOfLines={1} 　　里面是数字是代表行数，你想显示几行就弄几 转载于:https://www.cnblogs.com/xx929/p/10282791.html
react-native字体超出省略号隐藏
qq_53761321的博客
06-09 732
【代码】react-native字体超出省略号隐藏。
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3183
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
前端面试题（各种基础）
jontyy的博客
03-29 2203
HTML Doctype的作用，标准模式和混杂模式有什么区别 < ! D o c t y p e>声明位于HTML文档的第一行，出在html标签的前面，告诉浏览器的解析器用什么文档标准解析这个文档，当不存在或者格式错误的时候会采用兼容模式来加载这个网页 标准模式的排版和js运作模式都是以改浏览器支持的最高标准运行，在兼容模式中，页面以一种宽松的向后兼容的方式显示，模拟老师浏览器的...
前端面试总结
czy19970301的博客
09-16 2241
注册登录是怎么实现的 1.登陆注册要做成受控组件，组件定义state，和表单绑定 2.redux-saga调用数据请求，发送action修改数据， useEffect中dispatch发送数据请求，后端比对用户名是否重复，返回state 3.前端根据返回的信息成功跳转登陆页 4.登陆发送数据请求，数据库对比用户名密码是否正确, 根据后端返回的结果进入首页 5.setCookie将用户登录名密码token存cookie中 通过JWT(Json web token) 6.免密登陆 getC
web前端面试题（必背面试题）
热门推荐
Z_Gleng的博客
05-25 3万+
自己总结的常见的面试题 总字数13万+ 大概有200+左右道题 会不定期更新
react-native 文本超出限制显示省略号
hzxOnlineOk的博客
05-16 8440
使用numberOfLines即可实现 <Text numberOfLines={2} style={styles.recentText}>北京京东尚科信息技有限公司北京京东尚科信息技有限公司北京京东尚科信息技有限公司</Text> 请注意：numberOfLines是Text组件的属性，而不是在style中写的 ...
css 文本溢出显示省略号（单行和多行），解决react项目多行文本溢出显示省略号
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
08-13 839
单行 .text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行 .text{ width: 280px; display: -webkit-box; //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 word-break: break-all; text-overflow: ellipsis; //可以用来多行文本的情况下，用省略号“…”隐藏
react-native文本溢出显示省略号
qq_26889291的博客
11-19 1425
numberOfLines值为数字几为超出几行就显示省略号 {title}
RN的<Text>多余文字显示省略号
风雨飘飘飘啊飘的博客
05-09 1827
<Text numberOfLines={2} ellipsizeMode={'tail'} >文字文字文字文字文字文字</Text> 其中的numberOfLines是文字需要显示的行数，设置***ellipsizeMode={‘tail’}***以后多出部分会显示省略号 若有疑问，可留言！ 如有帮助，可给请作者的一杯咖啡添砖加瓦： ...
react-native 的 Text 多余的显示省略号
ahzhaihui的博客
01-03 5427
当字数太多的时候我们需要省略号来显示多余的字，使用Text的属性 1：显示几行(numberOfLines) &lt;Text numberOfLines={1}/&gt; 2：省略号显示的位置(ellipsizeMode)   可以是以下几个值tail、head、 middle、clip 默认的是tail (尾部)  头部 head 中间 middle 从尾部截掉 clip &l...
实现单行和多行文本溢出隐藏变为省略号
qq_44771388的博客
04-19 266
最近做项目用到了这个知识点，所以纪录一下 实现单行文本溢出方法 也就三行代码 overflow: hidden; white-space: nowrap; text-overflow:ellipsis; overflow: hidden 溢出隐藏 white-space属性是用来设置如何处理元素中的 空白，设置了nowrap之后文本不会换行。 我之前写过一篇关于 标签 pre和css的white-space属性 的博客。标签 pre和css的white-space属性 text-overflow 用来控制
完全征服React Native
08-22
React Native是Facebook于2015年推出的跨平台开发工具，可用于开发Android和iOS App，并且同时具有混合开发的优点（热更新，跨平台）以及本地App的性能。本课程采用新的ES6开发，主要内容包括ReactNative的基础知识，ReactNative的布局，组件，API，封装本地API和组件，发布ReactNative App，本地与ReactNative深度结合
react native Text 怎么判断有没有超出一行
07-17
在React Native中，可以使用onTextLayout属性来判断Text组件是否超出一行。你可以通过设置onTextLayout回调函数来获取文本布局信息，并根据该信息来判断文本是否超出一行。 下面是一个示例代码，演示如何使用onTextLayout来判断文本是否超出一行： ```javascript import React, { useState } from 'react'; import { Text, View } from 'react-native'; const MyComponent = () => { const [isTextOverflowed, setIsTextOverflowed] = useState(false); const handleTextLayout = (event) => { const { lines } = event.nativeEvent; setIsTextOverflowed(lines.length > 1); }; return ( <View> <Text onTextLayout={handleTextLayout}> Your long text here... </Text> {isTextOverflowed && <Text>Text is overflowed</Text>} </View> ); }; export default MyComponent; ``` 在上述代码中，我们使用useState来定义isTextOverflowed状态变量，用于表示文本是否超出一行。然后，我们定义了handleTextLayout回调函数，它会在文本布局发生变化时被调用。 在handleTextLayout函数中，我们获取了event.nativeEvent.lines属性，该属性表示文本被分割成的行数。如果行数大于1，则表示文本超出了一行，我们将isTextOverflowed状态变量设置为true。 最后，在渲染的时候，我们根据isTextOverflowed状态变量来决定是否显示"Text is overflowed"的文本。 希望对你有所帮助！如有其他问题，请继续提问。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值