【Flutter】Textの最大行数を指定・はみ出たら3点リーダー「...」で省略

Text の最大行数を指定し、文字列がはみ出たら3点リーダー「...」で省略する方法を紹介します。

今回はTextmaxLines overflowを使用します。

\ 世界最大級のオンライン学習サービス /

目次

最大行数を指定|maxLines

Container(
  width: 200,
  child: Text(
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus pretium quam vulputate dignissim suspendisse in est ante.',
    maxLines: 3,
  ),
),

maxLines で表示したい行数を指定します。

maxLinesあり

maxLinesなし

テキストがはみ出たら3点リーダーに省略|overflow

Container(
  width: 200,
  child: Text(
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus pretium quam vulputate dignissim suspendisse in est ante.',
    maxLines: 3,
    overflow: TextOverflow.ellipsis,
  ),
),

overflow の引数にTextOverflow.ellipsis に渡して、文字列が指定範囲からはみ出た場合に3点リーダー「...」で省略します。

参考

  • URLをコピーしました!
目次