0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ReactNativeでテキストを省略させる[...] 三点リーダー

Last updated at Posted at 2020-06-09

用途

  • 文字が多い時に省略させる

numberOfLines

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

行の合計数がこの数を超えないように、行の折り返しを含むテキストレイアウトを計算した後、
省略記号を使用してテキストを省略します。この小道具は一般的にで使用されellipsizeModeます。

eliipsizeMode

  • テキストに「...」を表示させる位置を設定する

  • head
    線が表示され、端がコンテナーに収まり、線の最初の欠落したテキストが省略記号で示されます。
    例: "... wxyz"

  • middle
    行が表示され、最初と最後がコンテナに収まり、中央の欠落したテキストが省略記号で示されます。
    例:「ab ... yz」

  • tail
    行が表示され、最初がコンテナーに収まり、行末の欠落したテキストが省略記号で示されます。
    例:「abcd ...」

  • clip
    線はテキストコンテナーの端を越えて描画されません。

numberOfLinesが設定されている場合、この小道具はテキストの切り捨て方法を定義します。numberOfLinesこのプロップと組み合わせて設定する必要があります。

まとめ

  • テキストを省略させたいときは、numberOfLineseliipsizeModeを使う

引用

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?