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 問題