Wie abschneiden von text mit Auslassungszeichen (...) in der flex?

In meinem flex-app, ich habe eine <mx:Text> Steuerung mit einer festen Höhe und Breite genug ist, um zwei Linien. Nun, wenn der text zu lang ist, um Sie in zwei Zeilen, ich würde gerne haben es abgeschnitten, mit dem zeigen Auslassungszeichen (...). Die Standard-abschneiden mit Auslassungszeichen vorhanden zu sein scheint, mit label, aber das label nicht show text in zwei Zeilen.

Wie kann ich dieses Verhalten nachzuahmen und in <mx:Text> Steuerung in flex? Vielen Dank im Voraus!!!

Öffnen Sie den label-code, den code zu kürzen Sie den text, und verwenden Sie dann den gleichen Ansatz in einer Klasse, die Sie erweitert Text.

InformationsquelleAutor Goje87 | 2010-11-29

4

Den spark.components.Label Komponente erbt die maxDisplayedLines Eigenschaft von spark.components.supportClasses.TextBase. Hier ist die Hilfe für die jeweilige Eigenschaft:

Einer Ganzzahl, die bestimmt, ob und wo der text abgeschnitten wird.

Abschneiden von text ersetzen überschüssige text abgeschnitten Indikator wie "...". Das abschneiden Indikator ist locale-abhängig; es wird angegeben, indem die "truncationIndicator" - Ressource in die "core" resource bundle.

Wenn der Wert 0 ist, erfolgt keine Kürzung. Stattdessen wird der text einfach abgeschnitten, wenn es passt nicht in die Grenzen der Komponente.

Wenn der Wert eine positive Ganzzahl ist, wird der text gekürzt werden, wenn notwendig, reduzieren Sie die Anzahl der Zeilen auf diese Ganzzahl.

Wenn der Wert -1 ist, wird der text so gekürzt, dass so viele Zeilen angezeigt werden, wie vollständig in die Höhe der Komponente.

Abschneiden erfolgt nur, wenn Sie den lineBreak-Stil ist "toFit"; der Wert dieser Eigenschaft wird ignoriert, wenn der Zeilenumbruch ist "explicit".

Der Standardwert ist 0.

Daraus können wir sehen, dass wenn Sie die maxDisplayedLines-Eigenschaft auf -1, die Komponente wird angezeigt, wie viel text, wie Sie können, und fügen Sie die "..." wenn es zu kürzen Sie den text.

InformationsquelleAutor BTSmith
1

So kommt es, dass die Text-Klasse in Flex 3 ist eine Unterklasse von Label. Was bedeutet die Einstellung "truncateToFit" - Eigenschaft auf Ihre Text-Steuerelements auf true fest genug sein sollte.

Einstellung der truncateToFit als wahr oder falsch ist, zeigen keinerlei Veränderung. Der text ist einfach noch immer abgeschnitten. Auch die Dokumentation für die Text-Kontrolle sagt "... im Gegensatz zu Etiketten, Text nicht abgeschnitten wird, dessen text mit "..."" (help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/...).

InformationsquelleAutor bug-a-lot
1

Die beste Lösung, die ich gefunden habe, ist über das spark Label und die maxDisplayedLines-Eigenschaft, etwa so:
```
        <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>
```
Funktionierte perfekt für mich.
Im Allgemeinen fand ich die spark Label besser sein als die mx-Label, aber YMMV.

funktionierte perfekt für spark-Etiketten!

InformationsquelleAutor Task
1

Ich weiß, dies ist eine alte post, aber viele Menschen noch in der Entwicklung und Aufrechterhaltung gemischt Spark/MX-Projekte. Also ich gebe meine zwei Cent für Leute, die noch vor diesem problem, speziell bei der Verwendung von MX-Listen und datagrids und in der Notwendigkeit einer multiline-das abschneiden in den renderer.

Soweit ich das beurteilen kann, ist die Frage zu MX-Komponenten, der Verwendung von Spark-wäre eine gute Wahl sein, aber nur wenn möglich.

So, in Fall ein "s:Label" ist nicht eine Wahl, ich würde denken, dass der beste Ansatz ist die Erweiterung der MX-Label-Komponente, und legen Sie seine textField-die multiline-Eigenschaft auf true. Das sollte den trick tun, ich würde zunächst versuchen, das hinzufügen, dass die Logik in der überschreibung der Methode updateDisplayList.

InformationsquelleAutor Victor Lira
0

Habe ich einen blog-post zu diesem Thema hier, das funktioniert gut, unabhängig von der version von Flex, die Sie verwenden:

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

Den kurzen ist es so:

myString.slice(0, 150).concat(myString.Länge > 150 ? "..." : "");

Diese wird, kürzen Sie die Zeichenfolge zu 150 Zeichen und, wenn die Zeichenfolge länger als 150 Zeichen fügt eine Ellipse.

InformationsquelleAutor TJ Downes
0

Auf flex 4, die Sie benötigen, um die Label#maxDisplayedLines auf etwas über 0 und es wird das clipping für Sie.

Sehen diese, um zu sehen, wie Sie die "..."

InformationsquelleAutor Dan
0

spark-Komponente Hat die trancion propert:@see.
http://blog.flexexamples.com/2009/06/15/determining-if-a-spark-simpletext-control-is-truncated-in-flex-4/

für eine spark-label können Sie die lineBreak="toFit" und dann legen Sie Ihre Breite: <s:Label lineBreak="true" maxWidth="400" maxDisplayedLines="1"/>

InformationsquelleAutor user1495110

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.