华为鸿蒙开发 ArkTS 怎么实现一行或者多行展示之后超出省略号（超出...）

snows_l

已于 2025-02-10 17:15:38 修改

阅读量2.9k

点赞数 15

分类专栏： HarmonyOS ArkTS 文章标签：华为 ArkTS harmonyos 鸿蒙开发

于 2023-12-07 11:27:55 首次发布

本文链接：https://blog.youkuaiyun.com/snows_l/article/details/134850986

版权

HarmonyOS 同时被 2 个专栏收录

2 篇文章

订阅专栏

ArkTS

2 篇文章

订阅专栏

个人博客（vue3 + nodejs + mysql ）http://snows-l.sitehttp://snows-l.site

一、代码

Text(item.des)
  .fontSize(16)
  .fontColor('#9B9B9B')
  .height(40)
  .width('100%')
  .maxLines(2)
  .textOverflow({ overflow:TextOverflow.Ellipsis })

二、效果图

1、一行展示省略号

2、两行展示省略号

3、来张整体效果图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

snows_l

关注关注

15
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

HarmonyOS鸿蒙开发指南:基础组件 text开发指导

sybh的博客

01-09

872

Text是文本组件，用于呈现一段文本信息。具体用法请参考Text API。

【HarmonyOS NEXT】Text组件超长省略号展示模式如何实现支持中间省略与头部省略模式

Mayism123的博客

06-21

480

ArkTS的Text组件，超长省略号展示模式不支持中间省略与头部省略模式，是否有替代方案？Text / 超长省略号 / 中间省略 / 头部省略 / 模式定义。使用Text的ellipsisMode属性可以实现。

参与评论您还未登录，请先登录后发表或查看评论

HarmonyOS Text超出部分末尾显示...

小牧在一直在学习,在前进的道路上大家一起学习，进步。

08-05

790

HarmonyOS Text 默认是显示一行,想要Text超出部分末尾显示... 设置 truncation_mode="ellipsis_at_end" 即可, truncation_mode 还有其他的属性, 当truncation_mode="ellipsis_at_start" 设置为true是点点在文字开头显示,当 truncation_mode="ellipsis_at_middle" 在中间的时候点点在中间显示. xml 代码如下 <?xml version="1.0" enc

鸿蒙app 开发中 text 最多一行超出一行省略不生效原因

最新发布

Ruiqi8的博客

02-20

214

当row 里面只有一个 text 元素的时候。row 里面不止一个子元素的时候代码。

鸿蒙 Text文本两行显示，多余的省略号标识

cmmboy1990的博客

05-07

876

1.代码：核心代码 ohos:max_text_lines="2" ohos:multiple_lines="true" ohos:truncation_mode="ellipsis_at_end" <Text ohos:height="match_content" ohos:width="match_parent" ohos:max_text_lines="2"

【HarmonyOS NEXT】文本超出显示省略号，省略号未在末尾显示

Mayism123的博客

06-11

1422

文本超出部分显示省略号方式通过ellipsisMode实现，省略号位置可设置三个形态：START、CENTER、END。超长文本显示 / ellipsisMode / 省略号。设置文本当行超出显示省略号，省略号未在末尾显示。

【鸿蒙】文本超出显示省略号

八块腹肌的博客

08-29

227

文本超出显示省略号

【鸿蒙开发实战】基于measure实现的文本测量

MNXN666的博客

07-19

489

搜索框展示历史记录，单个子组件超过固定长度后展示省略号，固定只展示两行，超出的文字被截断，通过点击按钮展示后续文本内容。搜索框展示历史记录，单个子组件超过固定长度后展示省略号，固定只展示两行，超出的文字被截断，通过点击按钮展示后续文本内容。2、测量两行文本和全部文本的高度，当全部文本的高度超过两行文本的高度时进行展开的逻辑。展开，当所有文本展开后，最后面跟着收起。3、文本全部展开后，点击收起，所有文本全部收齐变成固定的两行。1、文本默认超过两行时，直接截断，在截断文本后添加…文本收起态（即展开逻辑）

【HarmonyOS】【ArkUI】鸿蒙 eTS开发中Row组件显示多行文本

华为开发者联盟

07-05

897

eTS开发中Row组件无法多行显示文本？

鸿蒙5.0版开发：ArkTS基础组件（TextInput）

m0_69424697的博客

09-21

1723

单行文本输入框组件。

鸿蒙5.0版开发：ArkTS基础组件（Text）

m0_69424697的博客

09-21

1619

显示一段文本的组件。

鸿蒙Harmony应用开发—ArkTS-枚举说明

m0_64420071的博客

03-23

2431

ArkTS-枚举说明

鸿蒙实现两个text之间空行

m0_74395344的博客

06-25

418

如何实现文本组件之间的空行。

鸿蒙 harmonyOS 使用Text文字超长时使用省略号结尾

IT程序员的编程黑洞（鸽子王）抖音同名

05-07

1240

鸿蒙 harmonyOS 使用Text文字超长时使用省略号结尾文章目录鸿蒙 harmonyOS 使用Text文字超长时使用省略号结尾前言一、设置truncation_mode二、使用步骤1.直接在布局中设置2.当然了这里列出其他的属性总结前言其实可以显示在前中后或者滚动，但一般就是显示在结尾处提示：以下是本篇文章正文内容，下面案例可供参考一、设置truncation_mode 二、使用步骤 1.直接在布局中设置代码如下（示例）： //结尾处省略号截断 ohos:tr

【鸿蒙软件开发】文本显示（Text/Span）

m0_62599305的博客

10-23

4119

Text是文本组件，通常用于展示用户的视图，如显示文章的文字。具体用法可参考Text。通过textAlign属性设置文本对齐样式。Text('左对齐')Text('中间对齐')Text('右对齐')textAlign属性设置即可文本显示Text/Span。

HarmonyOS NEXT应用开发之元素超出List区域

maniuT的博客

03-19

1058

本示例介绍在List组件内实现子组件超出容器边缘的布局样式的实现方法。List组件clip属性默认为true，超出容器边缘的子组件会按照List的布局范围被裁剪。为此，可以在List组件内部添加一个占位的ListItem，以达到预期的布局效果。List占满整个窗口或者不可滚动的情况下，也可以在List外占位，同时设置List的clip属性为false达成同样的效果。该布局效果多用于头像、列表子项标题等元素的突出显示。

鸿蒙应用开发 | 6大布局之表格布局(TableLayout)！

06-21

1483

大家好，我是你们的朋友朋哥，今天开始朋哥开始研究鸿蒙了，会写一些文章分享给大家，希望多多提意见。上一篇原创文章解读了鸿蒙开发布局的堆叠布局(StackLayout) ，就是将布局一层一层的叠加起来，可以设置相对的位置，使用场景也比较特殊，使用的比较少，也是相对比较简单的一种布局。如果有开始学习的开发者可以不断的练习，只有多多练习了才能记住和学会。简介：表格布局，就是像表格一样，如果有需要做一个界面效果是一种表格效果，或者九宫格，就需要用这种布局。给大家...

[Element UI] tabs 标题过长溢出省略并悬浮显示全部内容

zennnlee的博客

01-04

1522

spanMouseenter 事件判断内容是否溢出, tabTipDisabled 变量控制悬浮提示的显示.el-tooltip 标签加上 slot=“label” 属性, 使悬浮内容只有在鼠标悬停时显示;思路: 用样式实现溢出省略, 用 el-tooltip 组件达到悬浮时显示的效果。

华为鸿蒙用ArKTS实现重复字母连续出现次数

11-17

华为鸿蒙OS (HarmonyOS) 使用ArKTS（Architecture Kit for Template Syntax）是一种基于模板的开发框架，它允许开发者更高效地编写模块化、易于维护的代码。当涉及到统计字符串中重复字母连续出现的次数时，ArKTS可能会提供一些便捷的工具和API，比如通过正则表达式匹配或迭代器遍历字符串。在一个简单的示例中，你可以创建一个函数，接收一个字符串作为输入，然后使用循环和条件判断来检查每个字符与其前一个字符是否相等，如果相等就递增计数器。这个过程可以封装成ArKTS中的一个操作或组件，方便复用和测试。例如，可能有这样一个伪代码片段： ```arkts fun countConsecutiveDuplicates(inputStr: String): Map<Character, Int> { val counts = hashMapOf<Character, Int>() var prevChar = "" for (char in inputStr) { if (char == prevChar) { counts[char] = counts.getOrDefault(char, 0) + 1 } else { counts[char] = 1 } prevChar = char } return counts } ``` 在这个例子中，`countConsecutiveDuplicates` 函数会返回一个映射，其中键是重复的字符，值是它们连续出现的次数。