HarmonyOS鸿蒙Next中Text长度超长显示的问题

HarmonyOS鸿蒙Next中Text长度超长显示的问题

Row() { Text(“这里是第一个Text”) .fontSize(12) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(“这里是第2个Text”) .fontSize(12) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .width(100) .padding({top: 2, bottom: 2}) .backgroundColor(Color.Gray)

如上这段代码，第二段文字不会被截取，而是会超出Row的范围显示。
期望的效果是第二段文字不超出Row的范围，如果超出的话则尾部显示…

效果如下：上面一行的效果是这段问题代码异常展示的效果，下面一行是期望展示的效果。
文字还会有一些边框，背景色，间距之类的要素


更多关于HarmonyOS鸿蒙Next中Text长度超长显示的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

从描述来看不是特别理解楼主想要的效果，或者要不要将两个文本合并到一个 Text 组件里，如果需要对两段文本做不同处理，可以分别用 Span 组件进行组装和单独设置属性，类似这样：

Text() {
   Span('这是第一个文本text1')
   Span('这是第二个文本text2')
}
.fontSize(12)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })

希望可以帮到你。

更多关于HarmonyOS鸿蒙Next中Text长度超长显示的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


补充了一下效果图，大佬将就看一下。用span好像是不行的，每段文字会有一些单独的背景，间距之类的要素

不过2楼说的layoutWeight(1)是可以实现这个效果了，

好咧我也学到了，能解决就好，

第2个Text加个.layoutWeight(1)就可以了

这个效果好像可以，谢谢了，

在HarmonyOS鸿蒙Next中，Text组件默认不会自动换行，当文本内容超出组件宽度时，超出的部分会被截断。可以通过设置maxLines属性来控制文本显示的行数，或者使用ellipsis属性在文本超出时显示省略号。如果需要实现自动换行，可以将Text组件放置在Flex或Column等布局组件中，并设置flexShrink属性为1，以确保文本能够根据容器大小自动调整显示。此外，可以通过TextStyle中的overflow属性来控制文本溢出时的处理方式，如TextOverflow.ellipsis用于显示省略号，TextOverflow.clip用于直接裁剪文本。

在HarmonyOS鸿蒙Next中，当Text组件的文本内容过长时，可以通过以下方式处理：

  1. 自动换行：设置Text组件的maxLines属性，限制最大行数，超出部分自动换行或省略。

    <Text maxLines="2" ellipsize="end">长文本内容...</Text>

  2. 省略号：使用ellipsize属性，将超出部分显示为省略号。

    <Text ellipsize="end">长文本内容...</Text>

  3. 滚动显示：将Text组件放入ScrollView中，实现滚动查看长文本。

    <ScrollView>
    <Text>长文本内容...</Text>
</ScrollView>

  4. 动态调整：通过代码动态计算文本长度，调整显示方式。

这些方法可以有效解决Text组件文本过长的问题，提升用户体验。

回到顶部