如果长度超过预期,我如何剪辑文本并附加省略号？

Question

我正在寻找一种附加省略号的好方法,"......",当我需要优雅地显示一个太大且不适合我想要的空间的字符串时.

我目前正在做的方式是寻找适合空间的最大字符长度,然后将字符串剪切到该长度并附加"...".所有在服务器端.

在伪代码中应该看起来像:

// I define this MAXCHARS var value by hunch
String outputString = MyLengthyString.SubString(0, MAXCHARS)
outputString.concatenate("...")
view.aLabelInThePage = outputString

问题是当我不使用固定长度的字体时,它可能不是以我想要的方式显示(占用所有空间).

有没有办法只使用JavaScript和CSS获得所需的结果？如果没有,有没有比我更好的方法？

Answer 1

You can use the CSS3 text-overflow property with a value of ellipsis. This property was introduced in IE6 and later adopted by other major browsers, with Firefox 7 being the most recent to add support for it:

#mySpan {
  /* IE 6+, Opera 11+, Chrome 1+, Safari 1.3+, Firefox 7+ */
  text-overflow: ellipsis;

  /* IE 8    */ -ms-text-overflow: ellipsis;
  /* Opera 9 */ -o-text-overflow: ellipsis;
}

Firefox 9 will be the first browser to implement the two-value syntax for this property, allowing both left and right sides of the text to have a value, though this syntax is currently noted as at-risk by the working draft specification.

This page has a non-JS solution for older Firefox versions, but it's not perfect and has a couple of limitations.