Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Text max height overflow

I would like my text to take a maximum height. And there is "…", when it overflows.

I know I can do this with maxLines=3 for example.
But the height of my text is not limited. So if the user increase the font size of their device, the text can be cut off like on the screen below.

enter image description here

What is the solution to make this work every time, regardless of the font size set on the user’s device?

SizedBox(
          height: 50,
          child: Text(
            article.title + "edzaedz daz dz dza dza dza dz adz ",
            style: TheOnesTextStyle.paragraphBoldMedium(),
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
          ),
        ),
Tags:

3

Answers


  1. 0

    Try This!

    SizedBox(
     // height: 50,<--  Remove this 
      child: Text(
        article.title + "edzaedz daz dz dza dza dza dz adz ",
        style: TheOnesTextStyle.paragraphBoldMedium(),
        maxLines: 3,
        overflow: TextOverflow.ellipsis,
      ),
    ),

    This works for me

    Login or Signup to reply.
  2. 0

    You need to calculate the height of the text first and then compare it to the height of the SizedBox.When fontSize changes, text maxLines also changes.

    code is shown below:

    SizedBox(
          height: 50,
          width: 110,
          child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              var str =
                  "test_text.test_text.test_text.test_text.test_text.test_text.test_text.test_text";
              return buildText(str, constraints, 3);
            },
          ),
        ),

      Text buildText(String str, BoxConstraints constraints, int maxLines) {
    TextPainter textPainter = TextPainter(
      text: TextSpan(
        text: str,
        style: buildTextStyle(),
      ),
      maxLines: maxLines,
      textDirection: TextDirection.ltr,
    );
    textPainter.layout(maxWidth: constraints.maxWidth);

    if (textPainter.height > constraints.maxHeight) {
      if (maxLines == 2) {
        return Text(
          str,
          softWrap: true,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: buildTextStyle(),
        );
      }
      return buildText(str, constraints, maxLines - 1);
    } else {
      return Text(
        str,
        softWrap: true,
        maxLines: maxLines,
        overflow: TextOverflow.ellipsis,
        style: buildTextStyle(),
      );
    }
  }

  TextStyle buildTextStyle() => const TextStyle(fontSize: 22.0);
    Login or Signup to reply.
  3. 0

    You can remove the height of the sized box, and wrap your text widget with a Flexible widget to take it space as needed.

    try this:

    SizedBox(
          width: 'as it needed',
          child: Flexible(
            child: Text(
              article.title + "edzaedz daz dz dza dza dza dz adz ",
              style: TheOnesTextStyle.paragraphBoldMedium(),
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
            ),
          ),
         ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search