Ending with "..." when Flutter Text exceeds a certain length-CodePudding

I have an application like this:

As you can see, there is a talma here. The reason for this overflow is that the Text is long and does not fit in the Container.

I want the Text to end with "..." if its content exceeds 14 characters. So only 11 characters will appear in Text.

How can I do that?

Codes:

  SizedBox(
    height: MediaQuery.of(context).size.height * 0.25,
    child: ListView(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      children: [
        for (var i = 0; i < Products.length; i  )
        Padding(
          padding: const EdgeInsets.only(right: 15),
          child: GestureDetector(
            child: Card(
              elevation: 0,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15),
              ),
              child: Container(
                width: MediaQuery.of(context).size.width * 0.37,
                decoration: BoxDecoration(
                  color: Color(0xFF3F3F46),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(15),
                      child: Image.network(Products[i].data()["Image"], fit: BoxFit.cover, width: 110, height: 110),
                    ),
                    SizedBox(height: MediaQuery.of(context).size.height * 0.015),
                    // ********** NAME:
                    Text(Products[i].data()["Name"], style: TextStyle(fontSize: 18, fontFamily: "Inter Regular", color: Color(0xFFD4D4D8)), textAlign: TextAlign.center,),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  ),

CodePudding user response：

If it is not mandatory to have exactly 11 characters, but instead let the UI fit as best as you can, by adding the following property to the Text widget:

overflow: TextOverflow.ellipsis

If you want it to be excactly 11 characters three '.' if it is longer than 14 characters, then you can instead do the following:

text.length > 14 ? '${text.substring(0, 11)}...' : text

where text in your case is Products[i].data()["Name"]

CodePudding user response：

Flexible(
child: new Container(
padding: new EdgeInsets.only(right: 13.0),
child: new Text(
  'Text largeeeeeeeeeeeeeeeeeeeeeee',
  overflow: TextOverflow.ellipsis,
  style: new TextStyle(
    fontSize: 13.0,
    fontFamily: 'Roboto',
    color: new Color(0xFF212121),
    fontWeight: FontWeight.bold,
  ),
),

), ),

use overflow: TextOverflow.ellipsis,

CodePudding user response：

Use overflow: TextOverflow.ellipsis,

Text(
 'Lorem ipsum dolor sit amet',
  overflow: TextOverflow.ellipsis,
  style: new TextStyle(
    fontSize: 16
  ),
),