关于html：jQuery DataTable溢出和文本包装问题


jQuery DataTable overflow and text-wrapping issues

我有以下DataTable(全角CSS类设置宽度= 100％)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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：

1
2
3
4
5
6
7
8
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变为：

1
2
3
4
5
.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样式或您自己的样式尚未这样做，则需要进行设置：

1
2
3
table.someTableClass {
  table-layout: fixed
}

现在，文本被椭圆形截断，要真正"看到"可能隐藏的文本，您可以实现工具提示插件或详细信息按钮或其他内容。但是，一种快速而又肮脏的解决方案是使用JavaScript将每个单元格的标题设置为其内容相同。我使用了jQuery，但您不必：

1
2
3
4
5
6
7
  $('.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进行设置)。没有明确宽度的任何列都将获得剩余空间的均匀分布。

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

相关讨论

以下CSS声明对我有用：

1
2
3
4
5
6
.td-limit {
    max-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

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

另一种方法是像这样在您的单元格数据周围添加一个元素：

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

然后像这样添加一些css：

1
2
3
4
5
.datatable td span{
    max-width: 400px;
    display: block;
    overflow: hidden;
}
相关讨论

相同的问题，我解决了将表放在代码之间的问题

1
 </ div>
相关讨论

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

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

我遇到了相同的文本换行问题，通过更改DT_bootstrap.css中的表类的CSS来解决了该问题。
我介绍了最后两个CSS行的表格布局和断字。

1
2
3
4
5
6
7
   table.table {
    clear: both;
    margin-bottom: 6px !important;
    max-width: none !important;
    table-layout: fixed;
    word-break: break-all;
   }
相关讨论

我来晚了，但是不幸的是，在阅读@Greg Pettit的答案以及几个博客或其他SO问题之后，我不记得我决定只制作几个dataTables插件来解决这个问题。

我将它们放在Mercurial回购中的bitbucket上。我放弃了fnSetFilteringDelay插件，只是更改了内部的注释和代码，因为我之前从未为任何东西做过插件。我做了2个，可以随时使用它们，为它们做贡献或提供建议。

  • dataTables.TruncateCells-将一列中的每个单元格都截断为一定数量的字符，用省略号替换最后3个字符，并将完整的预先截断的文本放入单元格的标题属性中。

  • dataTables.BreakCellText-尝试在该列的每个单元格中的用户定义的每个X字符处插入一个分隔符。关于包含空格和连字符的单元格，有些古怪之处，您会得到一些看起来很奇怪的结果(例如，在最后一个插入的
    字符之后出现了几个字符散乱)。也许有人可以使它变得更健壮，或者您可以摆弄breakPos来使该列在您的数据中看起来不错。

尝试将td {word-wrap: break-word;}添加到CSS中，看看是否可以解决。

相关讨论

在表元素上使用" respond nowrap"类应该可以解决问题。

您可以只使用render并在其周围包裹自己的div或span。 TD的最大宽度，最大高度等很难设置样式。分度和跨度很容易。

请参阅：https：//datatables.net/examples/advanced_init/column_render.html

我认为，与跨浏览器不支持的CSS hacks相比，这是一个更好的解决方案。