The text is clipped by language unit: Chinese by characters and English by words (by default). To clip text in the middle of a word, add \u200B between characters.
Since API version 11, preferably set the wordBreak attribute to WordBreak.BREAK_ALL to achieve the same purpose. The sample code snippet is as follows:
@Entry
@Component
struct TextEllipsisDemo {
@State text: string = '2 years · VIP membership for 3 months · 8GB · 230mm · Product color';
build() {
RelativeContainer() {
Text(this.text)
.width(200)// Set maximum number of rows
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })// Long text display ellipsis
.ellipsisMode(EllipsisMode.END)// Set the line breaking rule WordBreak.BREAK_ALL and implement truncation on a letter by letter basis
.wordBreak(WordBreak.BREAK_ALL)// API11+ required, for letter-level truncation
.textAlign(TextAlign.JUSTIFY)
.backgroundColor(Color.Green)
.fontSize(16)
}
.height('100%')
.width('100%')
}
}