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

我在这里已经很晚了，但在阅读了@Greg Pettit的回答以及几个博客或其他SO问题后，我遗憾地记不起来我决定只制作一些dataTables插件来处理这个问题。

我把它们放在Mercurial仓库的bitbucket上。我删除了fnSetFilteringDelay插件，只是更改了内部的注释和代码，因为我以前从未为任何东西制作过插件。我做了2，随意使用它们，为它们做出贡献或提供建议。

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

Answer 9

您可以使用渲染并包装自己的div或跨越它。 TD在最大宽度，最大高度等方面很难设计.Div和span很容易..

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

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

Answer 10

在table元素上使用“ respond nowrap”类应该可以解决问题。

jQuery DataTable溢出和文本换行问题

10 个答案: