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

我在一个带有 bootstrap 和 jquery 的网站上使用 Datatables 来创建一个大型（2000+条目）表。一些（文本）值太长，目前我使用如下内容：

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

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

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

修改 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/ http://jsfiddle.net/ax1gr1og/