React-Native：限制卡片部分中显示的文本长度

Question

我有一个很大的“文本”字段，当我在卡片部分中显示它时，我需要在结尾处修剪它并仅显示特定长度。

例如：如果文本是：

Lorem Ipsum只是印刷和排版行业的伪文本。自1500年代以来，Lorem Ipsum一直是行业的标准伪文本，当时一位不知名的打印机拿来一个厨房，然后将其打乱成麦

我需要缩短长度以获取类似以下内容的文本：

Lorem Ipsum只是假文字...

Answer 1

请检查此代码。您可以根据空间调整文本长度

 <Text numberOfLines={1}>
              {address.length < 35
                ? `${address}`
                : `${address.substring(0, 32)}...`}
            </Text>

Answer 2

您可以结合numberOfLines并width / flex支撑以实现此效果。

<Text numberOfLines={1} style={{ width: 100 }}>
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown
    printer took a galley of type and scrambled it to mak
</Text>

Answer 3

2022年答案

只需执行以下 2 个步骤即可。

1. 将numberOfLines属性设置为大于 0 的数字并且
2. 现在您可以使用ellipsizeMode属性来控制文本的截断方式。这里的 tail 意味着在到达第二行后，它将添加像这样的点“一些文本...”查看官方文档以了解更多信息

<Text numberOfLines={2} ellipsizeMode="tail">
 lorem ipsum is simply dummy text of the printing and typesetting industry.
</Text>