当文本比预期长时，如何剪辑文本并附加省略号？答案

【问题标题】：How can I clip text and append an ellipsis when it is longer than desired?当文本比预期长时，如何剪辑文本并附加省略号？
【发布时间】：2010-07-14 14:15:45
【问题描述】：

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

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

伪代码应该是这样的：

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

问题是当我不使用固定长度的字体时，它可能不会以我想要的方式显示（占用所有空间）。

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

【问题讨论】：

认为您的意思是“追加”而不是“后置”...
@Hello71：编辑，对不起。这应该是一个错误，因为英语不是我的母语。

标签： javascript css

【解决方案1】：

您可以使用CSS3 text-overflow property，其值为ellipsis。这个属性是introduced in IE6，后来被其他主要浏览器采用，最近添加了对它的支持的Firefox 7：

#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 将是第一个为此属性实现双值语法的浏览器，允许文本的左侧和右侧都有一个值，尽管 working draft specification 目前将此语法标记为存在风险.

This page 为旧 Firefox 版本提供了非 JS 解决方案，但它并不完美，并且有一些限制。

【讨论】：

@The：我刚刚为我的 Firefox 解决方案添加了一个链接。我发现了一些其他的，但它们有问题，并且在支持省略号的浏览器中引起了问题。
Firefox 7 终于也支持了。
@c69：感谢您告诉我，我已经更新了答案以提高列出的浏览器兼容性。

【解决方案2】：

您可以使用text-overflow: ellipsis;，但 Firefox 不支持。

【讨论】：

可能是“你怎么敢推荐使用我最喜欢的浏览器不支持的东西”旅。无论如何 +1。

【解决方案3】：

jquery width 命令以及仅显示“...”的第二个 span 标签是否有效？

if ($("#mySpan").width() > 400) {
     $("mySpan").width(400);
     $("mySpanEllipsis").show();
} 
else {
     $("mySpanEllipsis").hide();
}

你的 HTML 看起来像

<span id="mySpan"></span><span id="mySpanEllipsis">...</span>

未经测试，因此使用风险自负:-)。

【讨论】：