Flutter - Clipping Text ignoring word breaks

Question

In flutter when you use either TextOverflow.clip or TextOverflow.ellipses it clips the text at the word border when there are multiple words in the text.

However when the text data of Text() is only a single long word, it simply clips it at the last possible place.

Example: on a Captioned Image I don't want the label "Mr Ihaveanunusuallylongsurname" to show only "Mr" below the image, when all except the last few characters could fit.

Here on the middle photo you can see a lot of space is available after the "Mr...: .... I want at as much as possible of Mr Ihaveanunusuallylongsurname to be displayed in the available space to help the user to identify which is which.

How can Text() be made to clip ignoring word breaks, like when there is only a single word in the text?

class ClippedText extends StatelessWidget {
  final String text;
  final TextAlign textAlign;
  final TextStyle style;
  final int maxLines;

  const ClippedText(this.text,
      {Key key, this.textAlign, this.style, this.maxLines})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: style,
      textAlign: textAlign,
      maxLines: maxLines ?? 10,
      overflow: TextOverflow.ellipsis,
    );
  }
}

Note: I use the above ClippedText in stead of Text(). Normally text wraps when maxLines is not set. However to achieve this effect while using ClippedText I need to provide the encapsulated Text widget with a default value for maxLines that is not null. I have not been able to figure out what the real default is that is passed to Text when maxLines is not provided.

Admin · Answer

use https://en.wikipedia.org/wiki/Non-breaking_space

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('Title')),
        body: Container(
          width: 100,
          color: Colors.red[200],
          child: Text(
            'Mr Ihaveanunusuallylongsurname'.replaceAll(' ', '\u00A0'),
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
          ),
        ),
      ),
    );
  }
}

Flutter - Clipping Text ignoring word breaks

1 Answers