使用jQuery截断字符串的最简单方法答案

【问题标题】：Simplest way to truncate string w/jQuery使用jQuery截断字符串的最简单方法
【发布时间】：2012-02-28 15:59:46
【问题描述】：

我有一个页面当前使用jQuery plug-in 根据提供的宽度截断文本字符串。当字符串被截断并以“...”结尾时，完整的字符串被放置在元素的 TITLE 内。

通常它工作得很好，但是，我注意到一个页面有太多字符串，接近 100，我的页面开始崩溃，抱怨脚本停止响应。

有没有更简单的截断方法？我可以使用近似宽度，也许切换到字符数？

如果这可以通过几行代码来完成，我会很高兴。

这样的事情可以做吗？

【问题讨论】：

标签： jquery truncate

【解决方案1】：

它们被称为省略号。我建议你去 css 而不是使用 JavaScript。

类似的东西。

.ellipsis {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -moz-binding:url('ellipsis.xml');
}

ellipsis.xml 包含在哪里

<?xml version="1.0"?>
<bindings 
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
     <binding id="ellipsis">
        <content>
           <xul:window>
              <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
           </xul:window>
        </content>
     </binding>
</bindings>

对于像 FF(4 到 7) 这样不支持省略号的浏览器，也有一些变通方法可以实现这一点。

您可以查看此链接以了解 FF 解决方法text-overflow:ellipsis in Firefox 4? (and FF5)

【讨论】：

但这会给所有字符串添加省略号，对吧？我的一些字符串比分配的空间短。
它将根据应用它的容器的宽度来应用。如果字符串足够短以适合它，则它不会显示省略号。
我在课堂上看不到宽度。我会在哪里指定它？有什么可以看的例子吗？
@santa - 看看这个链接visibilityinherit.com/code/ellipsis.php。有几个演示。
如果达到宽度限制，它不会在一个字母中间切开吗？