react-native Text余分な文字数を非表示にし、省略記号で表示

1354 ワード

リファレンスhttps://reactnative.cn/docs/text#numberoflines
numberOfLinesは、テキストが長すぎる場合にテキストを切り取るために使用されます.折りたたみによって生成される改行を含め、合計行数はこの属性の制限を超えません.この属性は一般的にellipsizeModeと組み合わせて使用されます.
EllipsizeModeという属性は、通常、次のnumberOfLines属性と組み合わせて使用され、Textコンポーネントが表示する文字列をすべて表示できない場合に省略記号で修飾する方法を示します.
この属性には、次の4つの値があります.
  • head-テキストの内容ヘッダから省略記号を切り取って表示します.例:「...efg」
  • middle-テキストの内容の間に省略記号を切り取って表示します.例えば、「ab...yz」
  • tail-テキストコンテンツの末尾から切り取って省略記号を表示します.例えば、「abcd...」
  • clip-省略記号は表示されず、末尾から直接切断されます.
  • The default is tail.

  • コード#コード#
    次のコードは、このTextを実現するには1行しかなく、幅が50で、50を超える部分は省略し、末尾に省略記号を付けることです.
    <Text 
    	numberOfLines={1} 
    	ellipsizeMode = 'tail' 
    	style={width:50}
    >
                  
    </Text>