jQuery DataTable溢出和文本换行问题

Question

我有以下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'...这可以防止溢出但是将所有列设置为相同的宽度.

谢谢

Answer 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执行此操作).任何没有明确宽度的列都会得到剩余空间的均匀分布.

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

Answer 2

以下CSS声明适用于我:

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

Answer 3

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

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

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

然后添加一些这样的CSS:

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

Answer 4

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

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

Answer 5

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