HarmonyOS ArkUI Text 组件全解析：样式、截断与 Span 内联富文本

发布时间：2026/9/21 19:14:55

HarmonyOS ArkUI Text 组件全解析：样式、截断与 Span 内联富文本
系列鸿蒙 HarmonyOS 6.1 新特性实战 · 第 31 篇Text 是 ArkUI 中使用频率最高的基础组件也是最容易被轻视的组件。掌握它的完整 API能让你用最少的代码写出专业的文字展示效果。本篇覆盖样式链、多行截断、Span 内联富文本、对齐行高四大核心用法代码均在鸿蒙模拟器验证通过。运行效果初始状态展示各类文字样式点击“展开全文“展开长文本切换 Overflow 模式一、基础文字样式链Text 的样式属性全部通过方法链调用支持流式叠加Text(加粗文字) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333) .fontStyle(FontStyle.Italic) // 文字装饰线 Text(下划线).decoration({ type: TextDecorationType.Underline, color: #0066ff }) Text(删除线).decoration({ type: TextDecorationType.LineThrough, color: #e74c3c }) // 大写转换 Text(hello world) .textCase(TextCase.UpperCase) // → HELLO WORLDTextDecorationType的取值None、Underline、Overline、LineThrough。二、多行截断maxLines textOverflow超长文本的常见需求是“展开/收起“配合State控制行数State maxLines: number 2 State overflow: TextOverflow TextOverflow.Ellipsis Text(这是一段很长的演示文字……ArkTS 的 Text 组件支持单行和多行的文字截断……) .maxLines(this.maxLines) .textOverflow({ overflow: this.overflow }) .lineHeight(22) Button(this.maxLines 2 ? 展开全文 : 收起) .onClick(() { this.maxLines this.maxLines 2 ? 999 : 2 })TextOverflow的取值Ellipsis超出用…省略最常用Clip直接裁剪None不截断注意textOverflow必须配合maxLines才生效单独设置无效。三、Span 内联富文本当一段文字需要混合多种样式时用Span子组件替代多个TextText() { Span(普通文字 ) Span(蓝色加粗) .fontColor(#0066ff) .fontWeight(FontWeight.Bold) Span( 红色斜体) .fontColor(#e74c3c) .fontStyle(FontStyle.Italic) Span( 大字号) .fontSize(20) .fontColor(#27ae60) Span( 下划线) .decoration({ type: TextDecorationType.Underline, color: #8e44ad }) } .fontSize(15) .lineHeight(28)实战场景价格展示Text() { Span(价格) Span(¥).fontSize(14).fontColor(#e74c3c).fontWeight(FontWeight.Bold) Span(299).fontSize(24).fontColor(#e74c3c).fontWeight(FontWeight.Bold) Span(.00).fontSize(14).fontColor(#e74c3c) Span( 原价¥599).fontSize(12).fontColor(#aaa) .decoration({ type: TextDecorationType.LineThrough, color: #aaa }) }这种写法比多个Text横向排列更精确不会有换行问题。四、对齐与行高// 水平对齐 Text(居中).textAlign(TextAlign.Center).width(100%) Text(右对齐).textAlign(TextAlign.End).width(100%) // 行高提升阅读舒适度 Text(正文内容……) .lineHeight(32) .fontSize(14)TextAlign的取值Start默认、Center、End、JUSTIFY两端对齐。完整代码Entry Component struct Index { State maxLines: number 2 State overflow: TextOverflow TextOverflow.Ellipsis build() { Scroll() { Column({ space: 20 }) { Text(Text 组件全解析) .fontSize(22).fontWeight(FontWeight.Bold).fontColor(#1a1a1a) // 基础样式 Column({ space: 8 }) { Text(一、基础文字样式).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#333) Text(普通文本fontSize16fontColor#333) .fontSize(16).fontColor(#333).width(100%) Text(加粗fontWeight Bold).fontSize(16).fontWeight(FontWeight.Bold).width(100%) Text(斜体fontStyle Italic).fontSize(16).fontStyle(FontStyle.Italic).width(100%) Text(下划线装饰).fontSize(16) .decoration({ type: TextDecorationType.Underline, color: #0066ff }).width(100%) Text(删除线).fontSize(16) .decoration({ type: TextDecorationType.LineThrough, color: #e74c3c }).width(100%) Text(大写转换 hello world).fontSize(14) .textCase(TextCase.UpperCase).fontColor(#888).width(100%) } .padding(12).backgroundColor(#fff).borderRadius(8).width(100%) .border({ width: 1, color: #e0e0e0 }).alignItems(HorizontalAlign.Start) // 多行截断 Column({ space: 8 }) { Text(二、多行截断).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#333) Text(这是一段很长的演示文字用于展示 textOverflow 和 maxLines 的配合效果。ArkTS 的 Text 组件支持单行和多行的文字截断超出部分可以显示省略号或直接裁剪也可以通过 Marquee 实现跑马灯效果。) .fontSize(14).fontColor(#555).width(100%).lineHeight(22) .maxLines(this.maxLines) .textOverflow({ overflow: this.overflow }) Row({ space: 8 }) { Button(this.maxLines 2 ? 展开全文 : 收起) .fontSize(12).height(36).backgroundColor(#e8f0ff).fontColor(#0066ff) .onClick(() { this.maxLines this.maxLines 2 ? 999 : 2 }) Button(this.overflow TextOverflow.Ellipsis ? 改为 Clip : 改为省略号) .fontSize(12).height(36).backgroundColor(#e8f0ff).fontColor(#0066ff) .onClick(() { this.overflow this.overflow TextOverflow.Ellipsis ? TextOverflow.Clip : TextOverflow.Ellipsis }) } } .padding(12).backgroundColor(#fff).borderRadius(8).width(100%) .border({ width: 1, color: #e0e0e0 }).alignItems(HorizontalAlign.Start) // Span 内联富文本 Column({ space: 8 }) { Text(三、Span 内联富文本).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#333) Text() { Span(普通文字 ) Span(蓝色加粗).fontColor(#0066ff).fontWeight(FontWeight.Bold) Span( 红色斜体).fontColor(#e74c3c).fontStyle(FontStyle.Italic) Span( 大字号).fontSize(20).fontColor(#27ae60) Span( 下划线).decoration({ type: TextDecorationType.Underline, color: #8e44ad }) } .fontSize(15).width(100%).lineHeight(28) Text() { Span(价格) Span(¥).fontSize(14).fontColor(#e74c3c).fontWeight(FontWeight.Bold) Span(299).fontSize(24).fontColor(#e74c3c).fontWeight(FontWeight.Bold) Span(.00).fontSize(14).fontColor(#e74c3c) Span( 原价¥599).fontSize(12).fontColor(#aaa) .decoration({ type: TextDecorationType.LineThrough, color: #aaa }) } .width(100%) } .padding(12).backgroundColor(#fff).borderRadius(8).width(100%) .border({ width: 1, color: #e0e0e0 }).alignItems(HorizontalAlign.Start) } .padding(20).width(100%) } .width(100%).height(100%).backgroundColor(#f5f5f5) } }API 速查属性/方法说明.fontSize(16)字号fp 单位.fontWeight(FontWeight.Bold)字重Lighter / Normal / Medium / Bold.fontColor(#333)字色.fontStyle(FontStyle.Italic)斜体.decoration({type, color})装饰线Underline / LineThrough / Overline.textCase(TextCase.UpperCase)大小写转换.maxLines(2)最大行数.textOverflow({overflow})超出截断方式.lineHeight(24)行高.textAlign(TextAlign.Center)水平对齐Text(){ Span(...) }内联混合样式小结样式全链式所有样式属性都支持链式调用无需 style 对象截断必须搭配textOverflow需要maxLines配合才生效Span 替代多 Text混合样式用 Span 子组件避免布局对齐问题行高改善阅读正文推荐lineHeight为fontSize的 1.5~2 倍上一篇AppStorage / PersistentStorage 全局状态管理 | 下一篇Image 组件完全指南objectFit、占位图与加载回调

相关新闻

HarmonyOS 页面路由：Router API

HarmonyOS 页面路由：Router API

适用版本：HarmonyOS 6.1（API 12）及以上 验证环境：Pura 90 Pro 模拟器（HarmonyOS 6.1.1，API 24） 关键概念：router.pushUrl、router.replaceUrl、router.back、路由栈、参数传递 前言 …

2026/9/21 19:14:16 阅读更多 →
突破性视觉自回归建模：VAR架构深度解析与性能优化指南

突破性视觉自回归建模：VAR架构深度解析与性能优化指南

突破性视觉自回归建模：VAR架构深度解析与性能优化指南 【免费下载链接】VAR [NeurIPS 2024 Best Paper Award][GPT beats diffusion🔥] [scaling laws in visual generation📈] Official impl. of "Visual Autoregressive Modeling: Sca…

2026/9/21 1:58:12 阅读更多 →
Siamese-pytorch训练技巧：5个实用技巧提升图片相似性检测准确率

Siamese-pytorch训练技巧：5个实用技巧提升图片相似性检测准确率

Siamese-pytorch训练技巧：5个实用技巧提升图片相似性检测准确率 【免费下载链接】Siamese-pytorch 这是一个孪生神经网络（Siamese network）的库，可进行图片的相似性比较。 项目地址: https://gitcode.com/gh_mirrors/si/Siamese…

2026/9/20 20:13:34 阅读更多 →

最新新闻

安卓手机跑Linux桌面：Termux+VNC+XFCE完整指南

安卓手机跑Linux桌面：Termux+VNC+XFCE完整指南

有一次出差，电脑落在公司工位上，手边只剩一部旧安卓手机。偏偏那晚需要看一份带图表的工作日志，手机上装了 Termux，能敲命令，却怎么也看不到图形界面。我花了一晚上把 Termux、VNC、XFCE 这三个组件串起来，…

2026/9/21 19:14:52 阅读更多 →
Zephyr 中的 Seeed Studio XIAO RP2350 板级支持：硬件特性、引脚映射与 UF2 拖拽烧录实战

Zephyr 中的 Seeed Studio XIAO RP2350 板级支持：硬件特性、引脚映射与 UF2 拖拽烧录实战

操作系统嵌入式RTOS物联网 【免费下载链接】zephyr Primary Git Repository for the Zephyr Project. Zephyr is a new generation, scalable, optimized, secure RTOS for multiple hardware architectures. 项目地址： https://gitcode.com/GitHub_Trending/ze/zep…

2026/9/21 19:14:52 阅读更多 →
搞懂Markman原理，面试必问不再露怯

搞懂Markman原理，面试必问不再露怯

搞懂Markman原理，面试必问不再露怯 上周陪朋友面一家大厂的后端岗，他在白板前自信满满地开始手写代码。面试官抛出一个看似简单的问题：“你刚才用的这个工具，底层是怎么把 Markdown 转成 HTML…

2026/9/21 19:14:52 阅读更多 →
面试必问的倍率计算陷阱：3个致命Bug让你代码跑不通

面试必问的倍率计算陷阱：3个致命Bug让你代码跑不通

面试必问的倍率计算陷阱：3个致命Bug让你代码跑不通 刚把网上抄来的代码扔进IDE，结果报了一堆类型错误，或者算出来的数值完全对不上。你盯着屏幕上的报错信息抓狂，试图通过断点调试找出哪里错了，但逻辑看起来明明没错。这种“复制来的代码跑不通不…

2026/9/21 19:14:52 阅读更多 →
3步搞定多光谱实战,一文搞懂从零搭建全流程

3步搞定多光谱实战,一文搞懂从零搭建全流程

3步搞定多光谱实战,一文搞懂从零搭建全流程 配置环境就卡半天?依赖冲突、版本不对、库找不到,刚打开IDEA或VS Code就报错,这种折磨谁懂。别急,今天这篇带你 一文搞懂 多光谱处理的核心逻辑,不整虚的,直接上代码和实战。…

2026/9/21 19:14:52 阅读更多 →
10分钟搞定黑苹果EFI：OpCore Simplify一键生成工具完整指南

10分钟搞定黑苹果EFI：OpCore Simplify一键生成工具完整指南

10分钟搞定黑苹果EFI：OpCore Simplify一键生成工具完整指南 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify OpCore Simplify 是一款开源的…

2026/9/21 19:13:52 阅读更多 →

日新闻

agents-generator 决策矩阵全解析：从项目检测到 AGENTS.md 规则生成的 16 步判定流程

agents-generator 决策矩阵全解析：从项目检测到 AGENTS.md 规则生成的 16 步判定流程

agents-generator 决策矩阵全解析：从项目检测到 AGENTS.md 规则生成的 16 步判定流程 【免费下载链接】agentic-awesome-skills AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and …

2026/9/21 0:00:01 阅读更多 →
gin-vue-admin 前端工具函数全景指南：src/utils 复用规范与源码级解析

gin-vue-admin 前端工具函数全景指南：src/utils 复用规范与源码级解析

gin-vue-admin 前端工具函数全景指南：src/utils 复用规范与源码级解析 【免费下载链接】gin-vue-admin 🚀ViteVue3Gin拥有AI辅助的基础开发平台，企业级业务AI开发解决方案，内置mcp辅助服务，内置skills管理，…

2026/9/21 0:00:01 阅读更多 →
Wox 全功能插件开发实战指南：基于 Python / Node.js 宿主与 WebSocket 的持久化插件体系

Wox 全功能插件开发实战指南：基于 Python / Node.js 宿主与 WebSocket 的持久化插件体系

桌面应用AI 应用插件系统 【免费下载链接】Wox A cross-platform launcher that simply works 项目地址： https://gitcode.com/gh_mirrors/wo/Wox 点击查看 免费下载 全功能插件（Full-featured Plugin）是 Wox 三类插件实现方式中能力最完整的…

2026/9/21 0:00:01 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事：用Flutter给OpenHarmony做一款游戏集合类的App，说白了就是把若干小游戏塞进一个壳里，用统一入口分发。这个方向本身不算新鲜，真正让我花了不少心思的，是首页那堆游戏卡…

2026/9/21 3:13:20 阅读更多 →
Word表格编号全攻略：从列表编号到题注交叉引用

Word表格编号全攻略：从列表编号到题注交叉引用

写Word文档，最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事：今天在表后面多加了两个空白行，明天给客户交稿前发现整个章节的编号全部错位，光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/21 2:19:36 阅读更多 →
从第一个站到第二个站：独立开发者的静态网站选型与落地实践

从第一个站到第二个站：独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年，说实话，第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年，流量惨淡、功能臃肿、代码自己都懒得看第二遍之后，我才慢慢琢磨明白一个道理：第一个网站是练手&…

2026/9/21 4:51:05 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能分类：[AI/大模型]细分主题：AI 增强型 CI/CD 流水线自动化与 GitOps 实践：Agent 工作流、工具调用与任务拆解：从原型到生产的验收清单很多团队在尝试用大…

2026/9/21 15:36:51 阅读更多 →
容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场分类：[工程技术]细分主题：Kubernetes 生产环境运维与排障实战：可复制的项目复盘模板与决策记录大部分团队的事故复盘报告，最后都变成了躺在 Confluence 或钉…

2026/9/21 15:36:51 阅读更多 →
容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步分类：[工程技术]细分主题：Docker 容器化技术与镜像安全管理：核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用（包含 Web 接口、后台…

2026/9/19 23:35:34 阅读更多 →