省略号的解决方案 - Jquery + Bootstrap + Datatables答案

【问题标题】：Solution for Ellipsis - Jquery + Bootstrap + Datatables省略号的解决方案 - Jquery + Bootstrap + Datatables
【发布时间】：2016-11-15 18:38:48
【问题描述】：

我在一个带有 bootstrap 和 jquery 的网站上使用 Datatables 来处理一个大型（2000 多个条目）表。一些（文本）值太长了，目前我使用的是这样的：

render: function ( data, type, row ) {
                        return data.length > 35 ?
                        data.substr( 0, 35 ) +'…' :
                            data;
                    }

在 Datatables 中剪切字符串并在 html 标题中显示完整值。有一个更好的方法吗？就像一个插件会自动剪切但在点击时会显示所有内容或类似的东西？我找不到东西。

我看到了 jquery dotdotdot，但它没有让我点击扩展。

【问题讨论】：

标签： javascript twitter-bootstrap datatables ellipsis jquery-dotdotdot

【解决方案1】：

在 javascript 中修改字符串以使它们更易于查看或“适合”某些 DOM 元素是完全不行的。特别是当您在这里有许多正在回调中预处理的字符串时。

如果您对某些（或所有）列强制使用固定宽度，例如：

table.dataTable td:nth-child(3) {
  max-width: 100px;
}

然后你可以使用简单的 CSS 来确保列的内容不被换行，不超出边距，如果它太大，则显示一个漂亮的省略号

table.dataTable td  {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

演示 -> http://jsfiddle.net/ax1gr1og/

【讨论】：

这当然是一种更清洁的方式来做我已经做过的事情。您还可以帮我单击以展开/隐藏吗？谢谢
@Nico，我得看看你的代码。我猜你指的是子行？
我的代码与您的 jsfiddle 非常相似，因为我也使用数据表。我正在寻找一些东西，当悬停或单击 td 时，会将省略号扩展到实际文本并破坏设计，但在再次悬停/单击时也会再次修复它。
@Nico，为什么不将整个文本添加为title 属性？ <td title="content">content</td> 这就是我所做的。对于具有非常长字符串的列，我如上所述在 CSS 中截断（内容仍然存在，但不可见，对索引很重要），但也将整个内容插入为 title 属性。如果默认标题/工具提示丑陋或不够时尚，您可以使用引导工具提示或类似工具。
这太棒了 - 非常感谢 - 与我在网上找到的所有其他解决方案相比，这是一个如此简单的解决方案。用 DataTables 和 jQueryUI Resize 测试过，看起来很棒。