web-dev-qa-db-ja.com

jQuery DataTableのオーバーフローとテキストの折り返しの問題

私は次の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」で試しました...これはオーバーフローを防ぎますが、すべての列を同じ幅に設定します。

ありがとう

jqueryhtmlcssasp.net-mvc-3datatables
37
thiag0

私は自分の行を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;
}

[追加して編集：]自分のコードを使用して最初に失敗した後、私は人々を助けるかもしれない2番目の要件を認識しました。テーブル自体は固定レイアウトである必要があります。そうでない場合、セルは何があっても内容を収容するために拡張しようとし続けます。 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で行うことができます）。明示的な幅のない列は、残りのスペースの均等な分布を取得します。

それは多くの妥協のように思えるかもしれませんが、最終結果は私にとって価値がありました。

41
Greg Pettit

次のCSS宣言が機能します。

.td-limit {
    max-width: 70px;
    text-overflow: Ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
16
Mukesh Salaria

Word-wrapしかし、まだすべてのブラウザで動作するわけではありません。

別の方法は、次のようにセルデータの周りに要素を追加することです。

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

次に、次のようなcssを追加します。

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

同じ問題と私はコードの間にテーブルを置くことを解決しました

<div class = "table-responsive"> </ div>
4
César Augusto

テキストラップの同じ問題に直面し、DT_bootstrap.cssのテーブルクラスのcssを変更することで解決しました。最後の2つのcss行のtable-layoutとWord-breakを紹介しました。

   table.table {
    clear: both;
    margin-bottom: 6px !important;
    max-width: none !important;
    table-layout: fixed;
    Word-break: break-all;
   }
3
Harish Lalwani

単純にwhite-space:nowrapを使用するcssスタイルは、セルでのテキストの折り返しを回避するために非常にうまく機能します。そしてもちろん、text-overflow:Ellipsisとoverflow:hiddenを使用して、エリプシス効果でテキストを切り捨てることができます。

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

私はここに遅れていますが、@ Greg Pettitの回答といくつかのブログまたは他のSOの質問を読んだ後、残念ながら思い出せないことは、対処するためにdataTablesプラグインをいくつか作成することにしましたこれとともに。

Mercurialリポジトリのbitbucketにそれらを置きます。 fnSetFilteringDelay プラグインをフォローし、コメントとコードを変更しただけです。これまでにプラグインを作成したことがないためです。 2を作成し、それらを自由に使用したり、貢献したり、提案したりできます。

  • dataTables.TruncateCells -列内の各セルを設定された文字数に切り捨て、最後の3文字を楕円に置き換え、属性のセルのタイトルに切り捨てられたテキスト全体を配置します。

  • dataTables.BreakCellText -列内の各セルにユーザー定義のX文字ごとにブレーク文字を挿入しようとします。スペースとハイフンの両方を含むセルに関する癖があり、いくつかの奇妙な結果を得ることができます（最後に挿入された後にいくつかの文字がぶら下がる
    キャラクター）。誰かがそれをより堅牢にするか、列のbreakPosをいじってデータで問題なく見えるようにすることができます。

3
JustinP8

td {Word-wrap: break-Word;}をcssに追加してみて、修正されるかどうかを確認してください。

1
ScottS

テーブル要素でクラス「レスポンシブノウラップ」を使用すると、トリックを行う必要があります。

0
Ryan

レンダーを使用して、独自のdivをラップするか、その周囲にスパンするだけです。 TDは、max-width、max-heightなどに関してはスタイル設定が困難です。divとspanは簡単です。

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

クロスブラウザでサポートされていないCSSハックを使用するより良いソリューションだと思います。

0
user1281146