Flutter Create Ellipsis Text Example

Ellipsis text shows a fix line of defined text in flutter and after the line or given area completed it will show us three dots at the end of text. Even the given string text is larger then displayed text. But it will only show us a single line text or multiple line text as per our defined max lines. Here three dots meaning is that there are more text which is not displayed on the screen.

Flutter Create Ellipsis Text Example:

1. We are using overflow: TextOverflow.ellipsis property on Text widget to create Ellipsis text.

Text(
        'This is a sample Text for Text Over Flow Ellipsis',
        style: TextStyle(fontSize: 24, overflow: TextOverflow.ellipsis),
      )

2. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
          body: Center(
              child: Text(
        'This is a sample Text for Text Over Flow Ellipsis',
        style: TextStyle(fontSize: 24, overflow: TextOverflow.ellipsis),
      ))),
    );
  }
}

Screenshot: