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

Flutter text will be cropped in flutter

The fixed height container wraps a text, the text text will be very long, but it will appear in the four line of the figure with a crop, what I want is if it is not fully displayed, it will not be displayed. How to fix it? The height of the container must be fixed.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: CustomAppBar(
          context,
          title: "Input list",
        ),
        body: Container(
          child: Text(
            "The fixed height container wraps a text, the text text will be very long, but it will appear in the four line of the figure with a crop, what I want is if it is not fully displayed, it will not be displayed. How to fix it? The height of the container must be fixed",
            style: TextStyle(fontSize: 14, color: Colors.black),
          ),
          width: double.maxFinite,
          color: Colors.greenAccent,
          height: 58,
        ),
       );
  }

enter image description here

The height of the container will be adaptive according to other widgets. Then I want to display more text without cropping the last line.

Tags:

2

Answers


  1. 0

    Give your Text an overflow value, for example

    overflow: TextOverflow.ellipsis,
    Login or Signup to reply.
  2. 0

    If you want the overflowed text not to display, you can use overflow: TextOverflow.clip

    Example:

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Overflow Example'),
        ),
        body: Center(
          child: Container(
            height: 100, // Limiting the height of the container
            color: Colors.blue,
            padding: EdgeInsets.all(10),
            child: Text(
              'This is a long text that might overflow the container.' * 10,
              overflow: TextOverflow.clip, // or TextOverflow.clip
              style: TextStyle(
                fontSize: 20,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

    Try this code in dartpad

    The TextOverflow.clip removes all the oveflowed text

    MY LONG TEXT becomes `MY LONG T’

    Output:

    Example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search