使用 TextOverflow.ellipsis 时如何删除文本右侧的额外空间

Question

这是一个代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Home()));
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          color: Colors.green[200],
          child: Text(
            'https://someurl.com/4792479008289298462374623746723457',
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    );
  }
}

结果并不完全符合我的预期：

但我需要这样的东西：

softWrap 在这种情况下没有帮助

Answer 1

遵循 Github 问题：带有省略号的文本溢出设计怪异和丑陋

这是它的快速修复：

1. 在TextOverflow.ellipsis使用正则表达式模式\u2026，你可以申请一个正则表达式[ \u{200B}]上Text data

代码 ：

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          color: Colors.green[200],
          child: Text(
            'https://someurl.com/479247900828929846'.replaceAll("", "\u{200B}"),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    );
  }
}

输出：

2. 使用 flutter 包，它使您能够执行此Assorted Layout Widgets