HarmonyOS鸿蒙Next中分享一个实用的单行文本超出裁切效果

HarmonyOS鸿蒙Next中分享一个实用的单行文本超出裁切效果

Text(‘新建标签’) .textOverflow({ overflow: TextOverflow.Clip }) .maxLines(1) .flexShrink(1)

效果动态展示：

![handleTabs.gif](data-originheight=“665” data-originwidth=“320” height=“438” src=“data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==” style=“width: 211.0px;height: 438.0px;” width=“211”)


更多关于HarmonyOS鸿蒙Next中分享一个实用的单行文本超出裁切效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，实现单行文本超出裁切效果可以通过使用Text组件的maxLines和ellipsis属性来实现。maxLines用于限制文本显示的行数，而ellipsis用于指定当文本超出时显示的省略符号。

以下是一个示例代码：

import { Text } from '@ohos/text';

@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      Text('这是一个非常长的单行文本，超出部分将被裁切')
        .maxLines(1)
        .ellipsis('...')
        .fontSize(16)
        .fontColor(Color.Black)
        .width('100%')
        .textAlign(TextAlign.Start)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding(10)
  }
}

在这个示例中，maxLines(1)确保文本只显示一行，ellipsis('...')指定当文本超出时显示省略号。通过这种方式，可以实现单行文本超出裁切的效果。

更多关于HarmonyOS鸿蒙Next中分享一个实用的单行文本超出裁切效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过Text组件的maxLines和ellipsis属性实现单行文本超出裁切效果。设置maxLines为1，ellipsis为true，当文本超出容器宽度时，会自动显示省略号。示例代码如下：

<Text
    width="200vp"
    maxLines="1"
    ellipsis="true"
    text="这是一个超出容器宽度的单行文本示例，超出部分将被裁切并显示省略号。"
/>

这样，文本超出200vp宽度时，会自动裁切并显示省略号。

回到顶部