TextField固定宽度省略显示实现

定宽文本域的省略号，在老 Flash 项目里，还是蛮常见的需求。用TextField搞定基本宽度设定不难，但你要是想自动省略超出文字，那就得稍微动点脑筋了。

TextField的width属性设置好固定宽度，再配上wordWrap和autoSize，表面上看差不多，但 Flash 本身没法自动加“...”，得手动来。

文中这个addEllipsis函数就挺实用，逻辑简单粗暴但管用——不断截短文字，直到宽度合适为止，拼个省略号。像这样：

function addEllipsis(textField:TextField):void {
  var originalText:String = textField.text;
  var maxWidth:uint = textField.width;
  var textFormat:TextFormat = new TextFormat();
  textFormat.size = textField.size;
  var lineMetrics:LineMetrics;
  do {
    textField.text = originalText;
    textField.setTextFormat(textFormat);
    lineMetrics = textField.getLineMetrics(0);
    originalText = originalText.substr(0, originalText.length - 1);
  } while (lineMetrics.width > maxWidth && originalText.length > 0);
  if (originalText.length > 0) {
    textField.text = originalText + "...";
  }
}

啦，现在大部分项目不搞 Flash 了，换成 H5、React 或原生 App 开发的话，CSS 的text-overflow: ellipsis就轻松多了。

不过如果你在维护老项目，或者还在用 ActionScript 写小游戏，那这个小技巧绝对能帮你省不少事。想看移动端怎么搞？Android TextView 省略也挺有参考价值。

如果你遇到多语言内容展示，建议留意下字节长度差异，别一不小心多删了几个字。或者你可以扩展下这个函数，先计算字符宽度再裁切，更稳。