Help us understand the problem. What is going on with this article?

【React Native】三点リーダーでテキストを省略

文字が多い時に省略する。

numberOfLines

テキスト表示コンテナの行数

ellipsizeMode

head - 行がコンテナに収まるように行が表示され、行頭の欠落したテキストは省略記号で示されます。
例えば、 "... wxyz"

middle - 最初と最後がコンテナに収まるようになり、途中の欠落したテキストは省略記号で示されます。
例えば、"ab ... yz"

tail - 最初がコンテナに収まるようになり、行末の欠落したテキストは省略記号で示されます。
例えば、 "abcd ..."

clip - コンテナに収まらない文字はひょうじされなくなり、改行されません。

<Text
  numberOfLines={1}
  ellipsizeMode="tail"
>
longlongfoobarbazbarfoobarbazbarlonglongfoobarbazbarfoobarbazbarlonglongfoobarbazbarfoobarbazbarlonglongfoobarbazbarfoobarbazbarlonglongfoobarbazbarfoobarbazbar
</Text>

参考URL

https://facebook.github.io/react-native/docs/text.html#ellipsizemode

headwaters
常に新しい技術を取り込み、ありとあらゆる技術を駆使してビジネスを仕掛けるエンジニア集団です。技術力をベースに世の中の課題を解決しつつ、クライアントの強みを生かしたスタートアップインテグレーターとして共に事業も展開しています。「AI企画開発​」「マルチAIプラットフォーム(SyncLect)」「ロボットアプリ企画開発​」「React Native/Monaca/PWAアプリ開発」...etc他多数
http://www.headwaters.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away