☰

テキストに省略記号の効果を与える方法 質問する

tag-icon • tag-icon react-native ellipsis
テキストに省略記号の効果を与える方法 質問する

アプリに長いテキストが含まれているので、それを切り捨てて最後に 3 つのドットを追加する必要があります。

React Native Text 要素でこれを実行するにはどうすればよいですか?

ありがとう

ベストアンサー1

使用numberOfLinesコンポーネントのパラメータText:

<Text numberOfLines={1}>long long long long text<Text>

以下が生成されます:

long long long…

(幅の短いコンテナがあると仮定します。)

使用ellipsizeMode省略記号を または に移動するパラメータがheadデフォルト値です。middletail

<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>

以下が生成されます:

…long long text

注:コンポーネントには、コンテナーのサイズに応じて省略記号を適用する必要がある場合Textも含める必要があります。行レイアウトなどに便利です。style={{ flex: 1 }}

おすすめ記事