本文主要介紹Text 以字符的方式截斷

Text 以字符的方式截斷

https://github.com/flutter/flutter/issues/52869

在flutter中，Text控件默認的溢出顯示模式是TextOverflow.fade ,就是淡出

在iOS或者Android平臺默認的文件截斷模式一般是…省略，flutter里面對應的截斷模式為TextOverflow.ellipsis ,不過這里的截斷是英文按照單詞來的，這樣的模式會導致如果最后一個單詞很長時，截斷顯示會整理省略而不是最后超出的字符省略，導致模塊可能有一大塊空白。

Dart系統定義的截斷模式

/// How overflowing text should be handled. /// /// A [TextOverflow] can be passed to [Text] and [RichText] via their /// [Text.overflow] and [RichText.overflow] properties respectively. enum TextOverflow {/// Clip the overflowing text to fix its container.clip,/// Fade the overflowing text to transparent.fade,/// Use an ellipsis to indicate that the text has overflowed.ellipsis,/// Render overflowing text outside of its container.visible, }

如何解決英文單詞被整體截斷呢？

將單詞的每個字符切割開，插入寬度0的占位字符，打破系統默認的機制，這樣就可以以字符為單位省略了

需要注意。這種方式相當于修改了文本的內容，一般文本最大一行顯示可以用，如果文本支持2行以及以上的顯示的話，將會導致換行不再按照字符進行而按照單詞進行

下面是Example實現

extension TextOverflowUtil on String {/// 將flutter系統默認的單詞截斷模式轉換成字符截斷模式/// 通過向文本中插入寬度為0的空格實現static String toCharacterBreakStr(String word) {if (word == null || word.isEmpty) {return word;}String breakWord = '';word.runes.forEach((element) {breakWord += String.fromCharCode(element);breakWord += '\u200B';});return breakWord;} }

總結

以上是生活随笔為你收集整理的flutter-Text 以字符的方式截断的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。