"..." at the end of textfield

[pardoner]

I'm attempting to make a Textfield that is a fixed size and that replaces the overflow text that an ellipse (...). Has anyone found any clever ways to do this?

[pardoner]

Here's what I ended up doing but I'm not sure I like it

public function _truncateText(inText:TextField):TextField
{
var newString:String = inText.text.substring(0, 50);
var lastSpace:int = newString.lastIndexOf(" ");
inText.text = newString.substr(0, lastSpace);
inText.appendText(" ...");
return inText;
}
If anyone has any better ideas I'd love to here them

[kirupa]

Are you going for an effect similar to this: http://labs.nerdplusart.com/dynamictextblock/ ? Or is there something different you are looking for? Also, will you be using a fixed-width font?

Cheers!
Kirupa :)

[milkmit]

Here's one I came up with just last week (trimmed down to just the important parts). It uses a textfield property called 'numLines', and assumes you know how many *lines* of type you want, not characters (which makes sense for any non-fixed-width typeface).



var txtHeadline:TextField = new TextField();
txtHeadline.width = 200;
txtHeadline.wordWrap = true;
txtHeadline.text = "This is some test text that is designed to wrap to multiple lines. This is some test text that is designed to wrap to multiple lines. This is some test text that is designed to wrap to multiple lines. This is some test text that is designed to wrap to multiple lines."

// the magic
if (txtHeadline.numLines > 3) {
while (txtHeadline.numLines > 3) {
txtHeadline.text = txtHeadline.text.substr(0, -1); // remove last character one by one until the textfield is 3 lines in length
}
txtHeadline.text = txtHeadline.text.substr(0, -5); // remove addtional 5 characters to make room for the dots
txtHeadline.text = txtHeadline.text.concat("..."); // add dots
}

addChild(txtHeadline);


You can alter the number of lines to your liking. It's worked great for me so far.

[pardoner]

Ya, I like that milkmit. I modified it a little bit so that it remove the last two words instead of the last five characters. That way you don't end up with half a word at the end.

public function _truncateText(inText:TextField, maxLines:int = 2):TextField
{

if (inText.numLines > maxLines) {
while (inText.numLines > maxLines) {
inText.text = inText.text.substr(0, -1); // remove last character one by one until the textfield is 3 lines in length
}
var str = inText.text;
var secLastSpace:int = str.lastIndexOf(" ", str.lastIndexOf(" ")-1 );
str = str.substr(0, secLastSpace); // get everything before the last space
inText.text = str;
inText.appendText("..."); // add ellipses
}

return inText;
}

I'd still like to make something a little more dynamic. Anyone else have any light to shed?

[creatify]

one other way... though, you may have to adjust if some content does fit within the available space - if the copy is short and doesn't fill the textField, getCharIndexAtPoint will return a negative one as there isn't a character at that point.

Assuming there is a textField on the stage named "_tf"


_tf.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non quam diam. Donec vitae felis nec sem porta pharetra. Aliquam pellentesque bibendum quam vel luctus. Aliquam auctor, ante non viverra tincidunt, elit metus rutrum arcu, semper vestibulum magna augue at felis. Mauris sit amet dolor tortor, eu venenatis velit. Vestibulum sodales vehicula luctus. Integer tristique, velit id mollis accumsan, mauris arcu imperdiet ante, sit amet porttitor lectus dui eu purus. Praesent porttitor dui non nibh euismod ultrices. Fusce tincidunt, mi eu hendrerit tincidunt, orci lorem gravida tellus, eget tristique nunc massa ac urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.";

var charind:int = _tf.getCharIndexAtPoint(_tf.width-40, _tf.height-10);
_tf.text = _tf.text.substr(0,charind);
_tf.text = _tf.text.substr(0,_tf.text.lastIndexOf(" "))+"...";

[milkmit]

I missed these replies earlier, but thanks for the additions. I'm going to take a look at both these methods and see if they'll be of better use than what I came up with.