Comment tronquer du texte avec ellipse (...) dans flex?

Question

Dans mon application flexible, j'ai un contrôle <mx:Text> avec une hauteur fixe et une largeur suffisante pour afficher deux lignes. Maintenant, si le texte est trop long pour être affiché sur deux lignes, je voudrais qu'il soit tronqué avec des ellipses (...). La troncature par défaut avec ellipse semble être présente avec label, mais label ne peut pas afficher le texte sur deux lignes. Comment est-ce que j'imite ce comportement dans <mx:Text> contrôle dans flex? Merci d'avance!!!

Answer 1

Il se trouve que la classe Text dans Flex 3 est une sous-classe de Label. Ce qui signifie que la définition de la propriété "truncateToFit" sur votre contrôle Text à true devrait suffire.

Answer 2

La meilleure solution que j'ai trouvé est par l'étiquette d'allumage et la propriété maxDisplayedLines, comme ceci:

 <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> 

ont parfaitement fonctionné pour moi. En général, j'ai trouvé l'étincelle Label meilleur que le mx Label, mais YMMV.

Answer 3

J'ai un billet de blog sur ce sujet ici, qui fonctionne bien quelle que soit la version de Flex que vous utilisez:

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

Le court il est ceci:

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

Cela tronquera la chaîne à 150 caractères et si la chaîne est supérieure à 150 caractères, elle ajoute une ellipse.

Answer 4

Sur flex 4, vous devez définir le Label#maxDisplayedLines à quelque chose au-dessus de 0 et il fera le découpage pour vous.

Voir this pour voir comment personnaliser le "..."

Answer 5

Le composant spark.components.Label hérite de la propriété maxDisplayedLines de spark.components.supportClasses.TextBase. Voici l'aide pour cette propriété particulière:

Un entier qui détermine si et où le texte est tronqué. Tronquer du texte signifie remplacer l'excès de texte par un indicateur de troncature tel que "...". L'indicateur de troncature dépend des paramètres régionaux. il est spécifié par la ressource "truncationIndicator" dans le regroupement de ressources "core".

Si la valeur est 0, aucune troncation ne se produit. Au lieu de cela, le texte sera simplement écrêté s'il ne rentre pas dans les limites du composant.

Si la valeur est un nombre entier positif, le texte sera tronqué si nécessaire pour réduire le nombre de lignes à cet entier.

Si la valeur est -1, le texte sera tronqué pour afficher autant de lignes que la hauteur totale du composant.

La troncature n'est effectuée que si le style de saut de ligne est "toFit"; la valeur de cette propriété est ignorée si lineBreak est "explicite".

La valeur par défaut est 0.

De cela, nous pouvons voir que si vous définissez la propriété maxDisplayedLines à -1, le composant affiche le texte autant que possible, et ajouter le « ... » si elle devait tronquer le texte.

Answer 6

composant d'étincelle Possède la propriété de transmission: @see. http://blog.flexexamples.com/2009/06/15/determining-if-a-spark-simpletext-control-is-truncated-in-flex-4/

Answer 7

Je sais qu'il s'agit d'un ancien article, mais beaucoup de gens continuent de développer et de gérer des projets mixtes Spark/MX. Donc, je vais donner mes deux cents pour les personnes qui sont toujours confrontés à ce problème, en particulier lors de l'utilisation de listes MX et datagrids et ayant besoin d'une troncature multiligne dans le moteur de rendu. Pour autant que je sache, la question concerne les composants MX, utiliser Spark serait un bon choix, mais seulement si possible. Donc, dans le cas où un "s: Label" n'est pas un choix, je pense que la meilleure approche est d'étendre le composant MX Label et de définir la propriété multiligne de son textField à true. Cela devrait faire l'affaire, je vais d'abord essayer d'ajouter cette logique dans le remplacement de la méthode updateDisplayList.