Edited at

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

More than 1 year has passed since last update.

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


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