自定义文本样式
ps：必须配合 maxLines 使用，用来控制文本超出容器范围时的显示方式
写法
.textOverflow({overflow:TextOverflow.None})TextOverflow.None
效果
不做任何溢出处理，文本会直接撑破容器（默认会自动换行，仅单行 / 限制行数时生效）
场景
不限制行数、允许文本完整展示的场景
TextOverflow.Clip
效果
直接截断超出的文本，不显示任何省略标记
场景
列表项、空间紧张且不需要提示省略的场景
TextOverflow.Ellipsis
效果
文本超出时，在末尾添加省略号 ... 表示截断
场景
标题、列表项等需要提示 “文本未完全显示” 的场景
TextOverflow.MARQUEE
效果
文本以滚动跑马灯的形式循环显示，超出部分会水平滚动
场景
单行文本、空间不足但需要完整展示内容的场景（如通知栏、状态栏）
实操应用
热搜列表
代码
@Entry
@Component
struct HotPage {
build() {
Column() {
Text('热搜榜单')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')
.padding({ left: 16, right: 16, top: 16, bottom: 12 })
.width('100%')
Column() {
Row() {
Text('1')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#ff4757')
.width(32)
.textAlign(TextAlign.Center)
Text('五一假期国内人员跨区域流动规模再创历史新高出行热度爆棚')
.width('35%')
.fontSize(16)
.fontColor('#333333')
.fontWeight(FontWeight.Medium)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
.flexGrow(1)
.margin({ left: 12 })
Text('热')
.fontSize(10)
.fontColor('#ffffff')
.backgroundColor('#ff4757')
.borderRadius(4)
.padding({ left: 4, right: 4, top: 2, bottom: 2 })
.margin({ right: 16 })
Text('98.6w')
.fontSize(12)
.fontColor('#999999')
.margin({ right: 16 })
}
.width('100%')
.padding({ top: 14, bottom: 14 })
Divider().color('#f0f0f0').height(0.5)
Row() {
Text('2')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#ff4757')
.width(32)
.textAlign(TextAlign.Center)
Text('国家医保局出台新政策全力推动分娩相关费用实现个人零自付')
.fontSize(16)
.fontColor('#333333')
.fontWeight(FontWeight.Medium)
.textOverflow({ overflow: TextOverflow.MARQUEE })
.maxLines(1)
.flexGrow(1)
.margin({ left: 12 })
.width('35%')
Text('热')
.fontSize(10)
.fontColor('#ffffff')
.backgroundColor('#ff4757')
.borderRadius(4)
.padding({ left: 4, right: 4, top: 2, bottom: 2 })
.margin({ left:10,right: 16 })
Text('87.7w')
.fontSize(12)
.fontColor('#999999')
.margin({ right: 16 })
}
.width('100%')
.padding({ top: 14, bottom: 14 })
Divider().color('#f0f0f0').height(0.5)
Row() {
Text('3')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#ff4757')
.width(32)
.textAlign(TextAlign.Center)
Text('520 寓意浪漫好日子全国多地结婚登记开放预约瞬间全部约满')
.fontSize(16)
.fontColor('#333333')
.fontWeight(FontWeight.Medium)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
.flexGrow(1)
.margin({ left: 12 })
.width('35%')
Text('热')
.fontSize(10)
.fontColor('#ffffff')
.backgroundColor('#ff4757')
.borderRadius(4)
.padding({ left: 4, right: 4, top: 2, bottom: 2 })
.margin({ right: 16 })
Text('76.5w')
.fontSize(12)
.fontColor('#999999')
.margin({ right: 16 })
}
.width('100%')
.padding({ top: 14, bottom: 14 })
Divider().color('#f0f0f0').height(0.5)
Row() {
Text('4')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#999999')
.width(32)
.textAlign(TextAlign.Center)
Text('胖东来内部管理大整顿十九名中高层管理人员被集体降级处理')
.width('35%')
.fontSize(16)
.fontColor('#333333')
.fontWeight(FontWeight.Medium)
.textOverflow({ overflow: TextOverflow.MARQUEE })
.maxLines(1)
.flexGrow(1)
.margin({ left: 12,right:12 })
Text('65.4w')
.fontSize(12)
.fontColor('#999999')
.margin({ right: 16 })
}
.width('100%')
.padding({ top: 14, bottom: 14 })
Divider().color('#f0f0f0').height(0.5)
Row() {
Text('5')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#999999')
.width(32)
.textAlign(TextAlign.Center)
Text('全国多地迎来冷暖空气交汇气温骤降开启断崖式降温模式')
.width('35%')
.fontSize(16)
.fontColor('#333333')
.fontWeight(FontWeight.Medium)
.textOverflow({ overflow: TextOverflow.None })
.maxLines(1)
.flexGrow(1)
.margin({ left: 12 })
Text('54.3w')
.fontSize(12)
.fontColor('#999999')
.margin({ right: 16 })
}
.width('100%')
.padding({ top: 14, bottom: 14 })
Divider().color('#f0f0f0').height(0.5)
Row() {
Text('6')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#999999')
.width(32)
.textAlign(TextAlign.Center)
Text('当下年轻人就业观念发生重大转变更偏爱体制内稳定工作岗位')
.fontSize(16)
.fontColor('#333333')
.fontWeight(FontWeight.Medium)
.textOverflow({ overflow: TextOverflow.MARQUEE })
.maxLines(1)
.flexGrow(1)
.margin({ left: 12,right:12 })
.width('35%')
Text('43.2w')
.fontSize(12)
.fontColor('#999999')
.margin({ right: 16 })
}
.width('100%')
.padding({ top: 14, bottom: 14 })
Divider().color('#f0f0f0').height(0.5)
}
.width('100%')
.backgroundColor('#ffffff')
}
.width('100%')
.height('100%')
.backgroundColor('#f5f5f5')
}
}效果
