使用TextOverflow.ellipsis时如何删除文本右侧的多余空间 [英] How to remove extra space on right side of Text when using TextOverflow.ellipsis

问题描述

这是一个代码：

  import‘package：flutter / material.dart’; 
 
 void main（）{
 runApp（MaterialApp（home：Home（）））; 
} 
 
类主页扩展StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return Scaffold（
 body：Center（ 
孩子：容器（
宽度：200，
颜色：Colors.green [200]，
孩子：文本（
'https://someurl.com/ 4792479008289298462374623746723457'，
 maxLines：1，
溢出：TextOverflow.ellipsis，
），
），
），
）; 
} 
} 
  

结果与我所期望的不完全相同：

，但我需要这样的内容：

softWrap 在这种情况下无济于事

解决方案

在Github问题之后：

2. 使用flutter软件包可为您提供为此各种布局小工具

Here is a code:

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,
          ),
        ),
      ),
    );
  }
}

the result is not exactly what I expected:

but I need something like this:

softWrap doesn't help in this case

解决方案

Following the Github issue: Text overflow with ellipsis is weird and ugly by design

Here is a quick fix for it:

1. The TextOverflow.ellipsis uses a regex pattern \u2026, you can apply a regex pattern[\u{200B}] on the Text data

Code :

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,
          ),
        ),
      ),
    );
  }
}

OUTPUT:

2. Use the flutter package which gives you the ability to do this Assorted Layout Widgets

这篇关于使用TextOverflow.ellipsis时如何删除文本右侧的多余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！