【React Native】 3点リーダーで文字を省略する方法

ReactNativeの3点リーダー

Textで”numberOfLines”と”ellipsizeMode”を指定することで3点リーダーを表示することができます。

下記が使用例です。

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

省略せずに表示する行数です。

numberOfLines={1}の場合、1行目は表示して、2行以降になる部分を3点リーダーで省略します。

省略するときの表示方法を指定します。

numberOfLines	詳細	表示例
head	末尾がコンテナに収まるように表示され、行の先頭のテキストは省略記号で示されます。	…wxyz
middle	先頭と末尾がコンテナーに収まるように表示され、途中が省略記号で示されます。	ab…yz
tail (よく使用する)	先頭がコンテナーに収まるように行が表示され、末尾が省略記号で示されます。	abcd…
clip	コンテナに収まらない文字は表示されません。	abcde

ちなみにReact NativeでなくCSSで書く場合は下記のCSSで3点リーダーは実装可能です。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;