Question

我有一个很大的文本字段，当我在卡片部分显示它时，我需要在最后修剪它并且只显示特定的长度。

例如：如果文字是：

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台未知的打印机采用了类型的厨房并将其混为一谈

我需要缩短长度以获得如下文字：

Lorem Ipsum只是虚拟文字......

Answer 1

您可以合并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 2

<Text numberOfLines={1} ellipsizeMode="tail">
    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

请检查此代码。您可以根据自己的空间调整文字长度

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

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

3 个答案: