jQuery DataTable 溢位和 text-wrapping 問題

問題描述

我有以下 DataTable(full-width css 類集 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：

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 將變為：

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

現在文字用省略號截斷，實際上”see” 可能隱藏的文字可以實現一個工具提示外掛或一個詳細的按鈕或其他東西。但是一個簡單而骯髒的解決方案是使用 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 更好地打破它們。

這個整個截斷方法也有一個限制，你表示你不是一個粉絲：預設情況下，列將具有相同的寬度。我確定要始終如一地廣泛或一致縮小的列，並明確地在其上設定一個 percentage-based 寬度 (您可以在標記或 sWidth 中執行) 。任何沒有顯式寬度的列都可以平均分配剩餘的空間。

這似乎是很多的妥協，但最終的結果是值得的。

次佳解決方法

以下 CSS 宣告適用於我：

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

第三種解決方法

您可以嘗試設定 word-wrap，但它在所有瀏覽器中都不起作用。

另一種方法是在你的單元格資料周圍新增一個元素，如下所示：

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

然後新增一些這樣的 CSS：

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

第四種方法

我遲到了，但是在閱讀了 @Greg Pettit 的回答和一些部落格或其他 SO 問題之後，我很遺憾不記得我決定只做一些 dataTables 外掛來處理這個問題。

我把它們放在一個 Mercurial repo 的 bitbucket 。我接下來的 fnSetFilteringDelay 外掛，只是改變了裡面的意見和程式碼，因為我從來沒有做過任何外掛。我做了 2，並且隨意使用它們，為他們做貢獻或提供建議。

dataTables.TruncateCells – 將列中的每個單元格截斷到一定數量的字元，將最後 3 個字元替換為一個橢圓，並將完整的 pre-truncated 文字放在單元格的標題中。
dataTables.BreakCellText – 嘗試在列中的每個單元格中的每 X 個使用者定義的字元上插入一箇中斷字元。對於包含空格和連字元的單元格，有一些怪癖，你可以得到一些奇怪的結果 (比如最後一個插入的字元之後的幾個字元) 。也許有人可以使其更健壯，或者您可以使用該列的 breakPos，使其與資料一致。

第五種方法

我遇到同樣的文字包裝問題，透過更改 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;
   }

參考文獻

jQuery DataTable overflow and text-wrapping issues

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

jQuery DataTable 溢位和 text-wrapping 問題