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(
'textOveflow@gmail.com',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.black, fontSize: 20),
)
],
),
),
const SizedBox(
width: 30,
),
const Icon(
Icons.call,
size: 35,
)
],
),
),
));
}
}
Output : -
