【问题标题】:How to truncate text with ellipsis (...) in flex?如何在flex中用省略号(...)截断文本?
【发布时间】:2011-05-17 06:33:22
【问题描述】:

在我的 flex 应用程序中,我有一个 <mx:Text> 控件,它具有固定的高度和宽度,足以显示两行。现在,如果文本太长而无法在两行中显示,我希望将其截断并显示省略号 (...)。带有省略号的默认截断似乎与标签一起存在,但标签不能在两行中显示文本。

如何在 flex 中的 <mx:Text> 控件中模仿这种行为?提前谢谢!!!

【问题讨论】:

  • 打开标签代码,找到截断文本的代码,然后在扩展Text的类中使用同样的方法。

标签: apache-flex actionscript-3 air


【解决方案1】:

spark.components.Label 组件从spark.components.supportClasses.TextBase 继承maxDisplayedLines 属性。以下是该特定属性的帮助:

一个整数,用于确定文本是否被截断以及在何处被截断。

截断文本意味着用诸如“...”之类的截断指示符替换多余的文本。截断指示符取决于语言环境;它由“core”资源包中的“truncationIndicator”资源指定。

如果值为 0,则不发生截断。相反,如果文本不适合组件的边界,则会简单地对其进行剪切。

如果该值为正整数,则必要时将截断文本以将行数减少到该整数。

如果值为 -1,文本将被截断以显示完全适合组件高度的行数。

仅当 lineBreak 样式为“toFit”时才执行截断;如果 lineBreak 为“显式”,则忽略此属性的值。

默认值为 0。

由此我们可以看出,如果将 maxDisplayedLines 属性设置为 -1,组件将尽可能多地显示文本,如果必须截断文本,则附加“...”。

【讨论】:

    【解决方案2】:

    Flex 3 中的 Text 类恰好是 Label 的子类。这意味着将 Text 控件上的“truncateToFit”属性设置为 true 就足够了。

    【讨论】:

    【解决方案3】:

    我找到的最佳解决方案是通过 spark Label 和 maxDisplayedLines 属性,如下所示:

            <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:s="library://ns.adobe.com/flex/spark" >
                <s:Label text="{data.Name}" maxDisplayedLines="3" verticalAlign="middle" />
            </mx:Canvas>
    

    非常适合我。 总的来说,我发现 spark 标签比 mx 标签好,但是 YMMV。

    【讨论】:

      【解决方案4】:

      我知道这是一篇旧帖子,但很多人仍在开发和维护混合 Spark/MX 项目。所以我会为仍然面临这个问题的人提供两分钱,特别是在使用 MX 列表和数据网格并且需要在渲染器中进行多行截断时。

      据我所知,问题是关于 MX 组件,使用 Spark 将是一个不错的选择,但前提是可能。

      所以,如果不能选择“s:Label”,我认为最好的方法是扩展 MX Label 组件并将其 textField 的多行属性设置为 true。这应该可以解决问题,我首先尝试在 updateDisplayList 方法的覆盖中添加该逻辑。

      【讨论】:

        【解决方案5】:

        我在这里有一篇关于这个主题的博文,不管你使用的是什么版本的 Flex,它都能很好地工作:

        http://www.tjdownes.com/post.cfm/easy-string-truncation-with-ellipsis-using-ternary-operators-in-as3

        简而言之:

        myString.slice(0, 150).concat(myString.length > 150 ? "..." : "");

        这会将字符串截断为 150 个字符,如果字符串长于 150 个字符,则会添加一个省略号。

        【讨论】:

          【解决方案6】:

          在 flex 4 上,您需要将 Label#maxDisplayedLines 设置为高于 0 的值,它会为您进行剪辑。

          查看this 了解如何自定义“...”

          【讨论】:

            【解决方案7】:

            【讨论】:

            • 对于火花标签,您可以设置 lineBreak="toFit" 然后设置宽度:跨度>