如何解决Text组件文本为内容中文、数字、英文混合时显示省略号截断异常
2024-12-18 15:54:02
120次阅读
0个评论
文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,可在字母间添加零宽空格:\u200B。
从API version 11开始,建议优先组合wordBreak属性设置为WordBreak.BREAK_ALL方式实现字母为单位进行截断,示例代码如下:
@Entry
@Component
struct TextMixException {
@State text: string = '2年·VIP会员 3个月期·8GB·230mm·商品颜色';
build() {
RelativeContainer() {
Text(this.text)
.width(200)// 设置最大行数
.maxLines(1)// 文本超长显示
.textOverflow({ overflow: TextOverflow.Ellipsis })// 文本超长显示省略号
.ellipsisMode(EllipsisMode.END)// 设置断行规则WordBreak.BREAK_ALL后实现字母为单位进行截断
.wordBreak(WordBreak.BREAK_ALL)
.textAlign(TextAlign.JUSTIFY)
.backgroundColor(Color.Green)
.fontSize(16)
}
.height('100%')
.width('100%')
}
}
00