jQuery - 添加省略号、换行，但不要截断

Question

我想为包含在可滚动 div 中的动态文本添加省略号。但是，我不希望文本被截断。我希望添加省略号，然后在下一行继续添加文本。这是因为 div 一次只显示一行，所以省略号只是让用户知道还有更多内容，他应该点击滚动箭头继续阅读。

最好的方法是什么？ ThreeDots http://tpgblog.com/threedots 似乎是一个非常好的插件，有很多选项，但我只是不知道如何根据我的需要配置它。

感谢您提供的任何帮助。

Answer 1

为您的 DIV 提供一个高度，然后使用 text-overflow: ellipsis 并防止换行 CSS 方法。

这是一个简单的例子：

.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}

当然，总会有人制造麻烦，这次是 Firefox。您必须将文件绑定到 CSS。

这比您想象的要容易。只需创建一个新的文本文件，并将其命名为 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>

然后在你的 CSS 中，这样做：

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

这是一个快速的失败，有关更多信息，请查看这个人：

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

顺便说一句：如果您认为threedots 插件是一个更简单的选择，我说去吧。