Text widget not showing full text when long text in the line its hide and showing ellipse

Question

In text widget when text overflowing not taking its given width and show ellipse.

issue it gets hides long text and showing ellipse

I have some text long or in between the text line so that I have wrap text widget with Expanded and changed the text widget property to overflow.ellipses . but long text gets hide and shows only ellipses

Any other way to show long text with ellipse inside the given width
not showing full text

Expanded(
child: Text(
                                  name ?? " ",
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 1,
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 15),
                                 ),

Expected like this

I also tried changing softwrap=false but no changes with ellipse

Answer 1

It happens when your text contains white space(that is simple space). If text-overflow is used then it will apply the text-overflow effect right after the white space of text which is so long that it would not fit in the first line.

Since white space is creating the problem we can simply replace white space with an invisible character which is blank space. There is a difference between white space and blank space. The Unicode of white space is \u0020 and the Unicode of blank space is \u00A0.

You just have to use the string replaceAll method to replace white space with blank space : -

name.replaceAll(RegExp(' '), '\u00A0'),

Full code : -

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextOverFlow',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const TextOverFlow(),
    );
  }
}

class TextOverFlow extends StatefulWidget {
  const TextOverFlow({Key? key}) : super(key: key);
  @override
  // ignore: library_private_types_in_public_api
  _TextOverFlowState createState() => _TextOverFlowState();
}

class _TextOverFlowState extends State<TextOverFlow> {
  String name = "Dean Palmer Sophie Roberts ghifkkddffd";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("TextOverFlow"),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.only(right: 50, left: 50),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const CircleAvatar(
                  backgroundColor: Color.fromARGB(255, 196, 192, 192),
                  radius: 30,
                  child: Text(
                    'AR',
                    style: TextStyle(color: Colors.black, fontSize: 25),
                  ),
                ),
                const SizedBox(
                  width: 20,
                ),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        name.replaceAll(RegExp(' '), '\u00A0'),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style:
                            const TextStyle(color: Colors.black, fontSize: 20),
                      ),
                      const Text(
                        '[email protected]',
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(color: Colors.black, fontSize: 20),
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  width: 30,
                ),
                const Icon(
                  Icons.call,
                  size: 35,
                )
              ],
            ),
          ),
        ));
  }
}

Output : -