jQuery的数据表溢出和文字环绕问题 [英] jQuery DataTable overflow and text-wrapping issues

问题描述

我有以下数据表（全宽CSS类设置宽度= 100％）

I have the following DataTable (full-width css class sets 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：

Javascript:

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

一切工作正常，直到有一个很长的文本字符串的记录......当一个记录出现带有很长的文字，数据表溢出页面的右侧。 （见下面的截图，红线就是页面应该结束）
<一href=\"http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg\">http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg

有人能告诉我如何可以自动换行的单元格或prevent这个溢出问题？

Can someone tell me how to either wrap the text in the cells or prevent this overflow issue?

我已经通过表格的布局：固定尝试......这prevents溢出而设置的所有列的为相同的宽度

I've tried via 'table-layout: fixed'...this prevents the overflow but sets all of the columns to the same width.

感谢

推荐答案

我落户的限制（对某些人受益）有我行文字高只有一行。含有长字符串的CSS就变成了：

I settled for the limitation (to some people a benefit) of having my rows only one line of text high. The CSS to contain long strings then becomes:

.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;
}

用我自己的code和最初失败后，我认识到，可能有帮助的人第二个要求。本身需要的表有一个固定的布局或细胞只会继续努力扩大以适应内容，不管是什么。如果数据表样式或你自己的风格还没有做到这一点，你需要设置它：

[edit to add:] After using my own code and initially failing, I recognized a second requirement that might help people. The table itself needs to have a fixed layout or the cells will just keep trying to expand to accomodate contents no matter what. If DataTables styles or your own styles don't already do so, you need to set it:

table.someTableClass {
  table-layout: fixed
}

现在的文本被截断用省略号，实际上是看，即有可能隐藏你可以实现一个提示插件或细节按钮什么的文本。但是，一个快速和肮脏的解决方案是使用JavaScript来设置每个单元的标题是相同的内容。我用jQuery的，但你不必为：

Now that text is truncated with ellipses, to actually "see" the text that is potentially hidden you can implement a tooltip plugin or a details button or something. But a quick and dirty solution is to use JavaScript to set each cell's title to be identical to its contents. I used jQuery, but you don't have to:

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

数据表还提供在行回调和细胞水平的渲染，所以你可以提供逻辑，在这一点上，而不是用 jQuery.each 迭代器来设置标题。但如果你有修改单元格文本其他听众，你可能只是会更好打他们与 jQuery.each 结尾。

DataTables also provides callbacks at the row and cell rendering levels, so you could provide logic to set the titles at that point instead of with a jQuery.each iterator. But if you have other listeners that modify cell text, you might just be better off hitting them with the jQuery.each at the end.

这整个截断法也会有你指出你不是一个球迷的限制：默认情况下，列将具有相同的宽度。我确定将要始终如一宽或窄一致，并明确设置对他们的基于百分比的宽度（你可以在你的标记或sWidth做到这一点）列。没有一个明确的宽度任何列报复的剩余空间分配。

This entire truncation method will ALSO have a limitation you've indicated you're not a fan of: by default columns will have the same width. I identify columns that are going to be consistently wide or consistently narrow, and explicitly set a percentage-based width on them (you could do it in your markup or with sWidth). Any columns without an explicit width get even distribution of the remaining space.

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

That might seem like a lot of compromises, but the end result was worth it for me.

这篇关于jQuery的数据表溢出和文字环绕问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！