jQuery DataTable溢出和text-wrapping问题

问题描述

我有以下 DataTable(full-width css 类集 width = 100％)

<table class="datatable full-width">
    <thead>
        <th>LOB</th>
        <th>Creditor Line 1</th>
        <th>Creditor Line 2</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip</th>
        <th></th>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

使用 Javascript：

var profileTable =
            $(".datatable").dataTable({
                "iDisplayLength": 25,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bAutoWidth": false
            });

一直工作正常，直到有一个长文本字符串的记录… 当记录出现与真正长的文本，数据表溢出在页面的右侧。 (见下面的屏幕截图，红线是页面应该结束的地方)http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg

有人可以告诉我如何在单元格中包装文本，还是防止这种溢出问题？

我已经通过’table-layout: fixed’ 尝试… 这可以防止溢出，但将所有列设置为相同的宽度。

谢谢

最佳解决方法

我决定让我的行只有一行文本高的限制 (对某些人有好处) 。包含长字符串的 CSS 将变为：

.datatable td {
  overflow: hidden; /* this is what fixes the expansion */
  text-overflow: ellipsis; /* not supported in all browsers, but I accepted the tradeoff */
  white-space: nowrap;
}

[编辑添加：] 使用我自己的代码，最初失败后，我认识到可以帮助人们的第二个要求。表本身需要有一个固定的布局，或者单元格将不断尝试扩展以适应内容。如果 DataTables 样式或您自己的样式尚未这样做，您需要设置它：

table.someTableClass {
  table-layout: fixed
}

现在文本用省略号截断，实际上”see” 可能隐藏的文本可以实现一个工具提示插件或一个详细的按钮或其他东西。但是一个简单而肮脏的解决方案是使用 JavaScript 将每个单元格的标题设置为与其内容相同。我使用 jQuery，但你不必：

  $('.datatable tbody td').each(function(index){
    $this = $(this);
    var titleVal = $this.text();
    if (typeof titleVal === "string" && titleVal !== '') {
      $this.attr('title', titleVal);
    }
  });

DataTables 还提供行和单元格渲染级别的回调，因此您可以提供逻辑来设置该点的标题，而不是使用 jQuery.each 迭代器。但是，如果您有其他监听器修改单元格文本，则可能最后使用 jQuery.each 更好地打破它们。

这个整个截断方法也有一个限制，你表示你不是一个粉丝：默认情况下，列将具有相同的宽度。我确定要始终如一地广泛或一致缩小的列，并明确地在其上设置一个 percentage-based 宽度 (您可以在标记或 sWidth 中执行) 。任何没有显式宽度的列都可以平均分配剩余的空间。

这似乎是很多的妥协，但最终的结果是值得的。

次佳解决方法

以下 CSS 声明适用于我：

.td-limit {
    max-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

第三种解决方法

您可以尝试设置 word-wrap，但它在所有浏览器中都不起作用。

另一种方法是在你的单元格数据周围添加一个元素，如下所示：

<td><span>...</span></td>

然后添加一些这样的 CSS：

.datatable td span{
    max-width: 400px;
    display: block;
    overflow: hidden;
}

第四种方法

我迟到了，但是在阅读了 @Greg Pettit 的回答和一些博客或其他 SO 问题之后，我很遗憾不记得我决定只做一些 dataTables 插件来处理这个问题。

我把它们放在一个 Mercurial repo 的 bitbucket 。我接下来的 fnSetFilteringDelay 插件，只是改变了里面的意见和代码，因为我从来没有做过任何插件。我做了 2，并且随意使用它们，为他们做贡献或提供建议。

dataTables.TruncateCells – 将列中的每个单元格截断到一定数量的字符，将最后 3 个字符替换为一个椭圆，并将完整的 pre-truncated 文本放在单元格的标题中。
dataTables.BreakCellText – 尝试在列中的每个单元格中的每 X 个用户定义的字符上插入一个中断字符。对于包含空格和连字符的单元格，有一些怪癖，你可以得到一些奇怪的结果 (比如最后一个插入的字符之后的几个字符) 。也许有人可以使其更健壮，或者您可以使用该列的 breakPos，使其与数据一致。

第五种方法

我遇到同样的文本包装问题，通过更改 DT_bootstrap.css 中的表类的 CSS 来解决它。我介绍了最后两个 css 行 table-layout 和 word-break 。

   table.table {
    clear: both;
    margin-bottom: 6px !important;
    max-width: none !important;
    table-layout: fixed;
    word-break: break-all;
   }

参考文献

jQuery DataTable overflow and text-wrapping issues

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

jQuery DataTable 溢出和 text-wrapping 问题