flutter overflow属性省略号、零宽空格解决长字母、数字串整体显示省略号问题

cherry点点滴滴

于 2020-06-22 16:28:01 发布

阅读量1.4k

点赞数 1

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/baidu_31868779/article/details/106904271

版权

flutter 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种解决UI中长字符串（如字母、数字串）溢出的问题，通过在字符串间插入零宽空格，使得长字符串可以正确地显示为多行，避免了整体被省略的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

overflow: TextOverflow.ellipsis,
缺陷：会将长字母、数字串整体显示省略

现象：分组-12333333333333333333333333，可能会显示成：分组-1...

解决办法：将每个字符串之间插入零宽空格
String  breakWord(String word){
  if(word == null || word.isEmpty){
    return word;
  }
  String breakWord = ' ';
  word.runes.forEach((element){
    breakWord += String.fromCharCode(element);
    breakWord +='\u200B';
  });
  return breakWord;
}

child: Text(
  breakWord(text),
  style: TextStyle(
      fontSize: 14,
      color: selected ? TriColor.PRIMARY : TriColor.BLACK),
  maxLines: 1,

  overflow: TextOverflow.ellipsis,
),