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

发布时间：2026/10/13 7:58:23

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/10/13 7:57:24 阅读更多 →
突破性视觉自回归建模：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/10/7 10:06:38 阅读更多 →
Siamese-pytorch训练技巧：5个实用技巧提升图片相似性检测准确率

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

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

2026/10/12 12:38:29 阅读更多 →

最新新闻

Litellm：大模型调用的统一抽象层与生产级路由网关

Litellm：大模型调用的统一抽象层与生产级路由网关

1. 为什么“litellm”突然在开发者圈里刷屏？它到底不是个新模型，而是一把万能钥匙最近两周，好几个不同技术栈的同行在群里发截图：有人在用 Python 调通了本地运行的 Qwen3，有人把公司私有部署的 DeepSeek-R1 接进了旧版…

2026/10/13 7:57:23 阅读更多 →
agent-skills技能库实战：从工具调用到Agent能力层设计

agent-skills技能库实战：从工具调用到Agent能力层设计

做AI Agent应用开发这段时间，我踩得最深的坑，就是Agent表面上的能力边界很大，一旦落到具体场景里，连"查个数据再算个结果"这种基础操作都经常翻车。后来我把思路从"拼命塞提示词"转向"给Agent一套可复用…

2026/10/13 7:57:23 阅读更多 →
需求追踪工具reqtrace：从RTM缺口到可验证的覆盖矩阵

需求追踪工具reqtrace：从RTM缺口到可验证的覆盖矩阵

简介：reqtrace 是一款使用 Rust 语言开发的需求追踪工具，定位服务于软件研发团队、需求分析人员，以及关注研发工具链的开发者。它主要解决持续交付场景下如何低成本地解析和追踪各类需求工件的问题，整体设计强调可扩展、支持多种格…

2026/10/13 7:57:23 阅读更多 →
ArtCraft：工程化创意生产方法论与模块化AI工作流

ArtCraft：工程化创意生产方法论与模块化AI工作流

1. 项目概述：ArtCraft 不是“艺术手作”的简单拼接，而是一套可落地的创意生产方法论ArtCraft 这个词乍看像英文单词组合，但实际在当前内容创作与数字工具实践圈里，它已悄然演变为一个具象化的工作流代号——不是某个具体软件、平台…

2026/10/13 7:57:23 阅读更多 →
频谱分析仪选型实战：N9020A/N9020B/N9030A对比与避坑指南

频谱分析仪选型实战：N9020A/N9020B/N9030A对比与避坑指南

第一次见到N9020A，是在某研发团队的实验室里。当时我盯着那一排同族产品——N9020A、N9020B、N9030A，旁边还挂着安捷伦和是德科技两个logo，说实话一下子没分清谁是谁。后来自己上手用过、选过型、也看过不少二手仪器，才把这条产品…

2026/10/13 7:57:23 阅读更多 →
Ubuntu下ORB-SLAM2编译安装全攻略：依赖解析与避坑指南

Ubuntu下ORB-SLAM2编译安装全攻略：依赖解析与避坑指南

1. 为什么 ORB-SLAM2 的编译安装值得单独写一篇ORB-SLAM2 是视觉 SLAM 领域里被引用最多、被复现最多的开源系统之一，支持单目、双目和 RGB-D 三种传感器模式，能做实时定位与稀疏建图。很多人第一次接触它，都是被论文里的轨迹图和回环效果吸引…

2026/10/13 7:56:22 阅读更多 →

日新闻

物联网系统集成避坑指南：从选型到验收的关键要点

物联网系统集成避坑指南：从选型到验收的关键要点

做了这么多年物联网系统集成的项目，我最大的感受是，大部分坑不是出在技术前沿，而是出在一些看起来很平常的地方。设备选了便宜的、协议没问清楚、现场没摸透、验收标准写得含糊——这些细枝末节，最后都会变成延期、超支和扯皮的大…

2026/10/13 0:00:57 阅读更多 →
ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

如果你玩ESP32有一阵子了，很难不碰到舵机控制这道坎。做智能小车要转方向，做机械臂要抬关节，做云台要偏航俯仰，背后都是同一个东西在干活：舵机。而我见过太多人卡在“代码能编译、舵机就是不听话”这个阶段&#xff0c…

2026/10/13 0:00:57 阅读更多 →
CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

1. 为什么CAN总线至今仍是工业现场的“硬通货”？——从汽车底盘到智能温室的真实需求你有没有拆过一辆老款燃油车的中控台？或者调试过某高校实验室里那台跑着Modbus协议却频频丢帧的PLC控制柜？又或者，在某个农业物联网项目里&…

2026/10/13 0:00:57 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/13 2:54:56 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/12 0:16:38 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/13 1:58:08 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 21:05:09 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 14:48:49 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 18:11:17 阅读更多 →