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

Flutter – How to make text overflow clip at the edge of parent widget's

I’m trying to make the a container with some text inside. If the text is overflow, then the remaining text is clipped at the edge of the container.

TextOverflow.visible and TextOverflow.clip seems to do the same effect, which is desired. It remove the words that overflow instead of slicing it at the edge.

My code:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          color: Colors.lightBlue,
          width: 200,
          child: const Text(
            "the quick brown fox jumped over the lazy dog.",
            maxLines: 1,
            overflow: TextOverflow.clip,
          ),
        ),
        const SizedBox(
          height: 4,
        ),
        Container(
          color: Colors.lightBlue,
          width: 200,
          child: const Text(
            "the quick brown fox jumped over the lazy dog.",
            maxLines: 1,
            overflow: TextOverflow.visible,
          ),
        ),
      ],
    ),
  );
}

Result:

The container have some trailing space, enough to fit half the word "over" but it remove the whole word instead.

result

Expected:

expected

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    softWrap: false to and remove overflow work perfectly. Credit to @DroidFlutter, thanks!

    Container(
  color: Colors.lightBlue,
  width: 200,
  child: const Text(
    "the quick brown fox jumped over the lazy dog.",
    softWrap: false,
  ),
)

  2. 0

    you can do it like this :

    Text(
          "the quick brown fox jumped over the lazy dog.",
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        )

    although the output would show the text like this

    the quick brown fox jumped ov...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search