🚀
【Flutter】長いテキストをドット3つ(...)で省略して表示する
概要
この記事では、FlutterのTextウィジェットで、つぎの画像のように長いテキストをドット3つで省略してする方法について記載しています。
Textウィジェットのoverflowを使う
Textウィジェットで長い文章を省略して表示するには、overflowプロパティを使用します。
サンプルコードは、つぎのようになります。
const Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
style: TextStyle(
fontSize: 20.0,
),
overflow: TextOverflow.ellipsis,
)
TextウィジェットのoverflowプロパティにはTextOverflow
を設定できます。
例のように、TextOverflow.ellipsis
を設定すると、オーバーフローしたテキストは...
と省略して表示されるようになります。
同様のサンプルコードをGitHubに上げていますので、よければ参考にしてください。
Discussion