jQuery DataTable 溢出和文本换行问题答案

【问题标题】：jQuery DataTable overflow and text-wrapping issuesjQuery DataTable 溢出和文本换行问题
【发布时间】：2011-12-24 21:06:04
【问题描述】：

我有以下 DataTable（全角 css 类设置宽度 = 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'...这可以防止溢出，但会将所有列设置为相同的宽度。

谢谢

【问题讨论】：

标签： jquery html css asp.net-mvc-3 datatables

【解决方案1】：

我接受了让我的行只有一行文本高的限制（对某些人来说是一种好处）。包含长字符串的 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
}

现在文本被省略号截断，要真正“看到”可能隐藏的文本，您可以实现工具提示插件或详细信息按钮或其他东西。但是一个快速而肮脏的解决方案是使用 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 击中它们。

整个截断方法还有一个限制，您已表明您不喜欢：默认情况下，列将具有相同的宽度。我确定将始终宽或始终窄的列，并在它们上明确设置基于百分比的宽度（您可以在标记中或使用 sWidth 来实现）。任何没有明确宽度的列都会平均分配剩余空间。

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

【讨论】：

我无法让它为我工作。 Datatables 拒绝尊重这些 CSS 属性，并且只会在字符串被连字符时包装字符串。
一些未指明但描述的 CSS 是单元格必须设置一个高度，该高度将仅包含一行文本。这不适用于多行文本。事实上，它根本不应该包装。这是“空白：nowrap”的作用。

【解决方案2】：

以下 CSS 声明适用于我：

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

【讨论】：

【解决方案3】：

您可以尝试设置word-wrap，但它不适用于所有浏览器。

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

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

然后像这样添加一些css：

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

【讨论】：

感谢您的回复。此解决方案限制了列大小并隐藏了溢出，但是它不适用于将文本包装在单元格中。
您可以尝试this page 的解决方案，但是目前还没有一种解决方案可以始终适用于所有浏览器。最一致的解决方案包括在每个字符后添加一个特殊字符，但它相当hackish。当我之前做过类似的事情时，它是为了让您可以将鼠标悬停在截止文本上，并且会出现一个弹出窗口来显示显示的隐藏文本。这也有节省垂直空间的优势。

【解决方案4】：

同样的问题，我解决了把表格放在代码之间

<div class = "table-responsive"> </ div>

【讨论】：

如果你使用过 nowrap 类，也可以从表中删除

【解决方案5】：

只需简单的使用white-space:nowrap 的css 样式就可以很好地避免单元格中的文本换行。当然，您可以使用text-overflow:ellipsis 和overflow:hidden 来截断带有省略号效果的文本。

<td style="white-space:nowrap">Cell Value</td>

【讨论】：

【解决方案6】：

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

我将它们放在 Mercurial 存储库中的 bitbucket 上。我使用了fnSetFilteringDelay 插件，只是更改了里面的 cmets 和代码，因为我以前从未为任何东西制作过插件。我制作了 2 个，您可以随意使用它们、为它们做出贡献或提供建议。

dataTables.TruncateCells - 将列中的每个单元格截断为设定的字符数，用省略号替换最后 3 个，并将完整的预截断文本放入单元格的标题属性中。
dataTables.BreakCellText - 尝试在列的每个单元格中的每个用户定义的 X 字符中插入一个分隔符。关于同时包含空格和连字符的单元格有一些怪癖，您会得到一些看起来很奇怪的结果（例如在最后插入的
字符之后散乱的几个字符）。也许有人可以使它更健壮，或者您可以只是摆弄该列的 breakPos 以使其与您的数据看起来没问题。

【讨论】：

【解决方案7】：

我遇到了同样的文本换行问题，通过更改 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;
   }

【讨论】：

很好，但行高会增加。任何解决方案，如工具提示或只是...？

【解决方案8】：

尝试将 td {word-wrap: break-word;} 添加到 css 中，看看是否可以修复它。

【讨论】：

我尝试在没有“表格布局：固定”的情况下使用它，但没有积极的结果。

【解决方案9】：

您可以只使用渲染并包装自己的 div 或围绕它进行跨越。 TD 在最大宽度、最大高度等方面很难设置样式。Div 和 span 很简单..

见：https://datatables.net/examples/advanced_init/column_render.html

我认为一个更好的解决方案是使用不支持跨浏览器的 CSS hack。

【讨论】：

【解决方案10】：

在表格元素上使用“响应式 nowrap”类应该可以解决问题。

【讨论】：