数据表特定列数据截断不适用于 chrome

Question

大约一个月前，chrome 开始无法在 chrome 浏览器中使用我的截断功能，但在 edge 中似乎一切正常。

在 chrome 中，我的数据表如下所示。 IMG HOW DATATABLE LOOK IN CHROME IN FULL SIZE WINDOW

In edge 以及我想要的样子，它看起来像这样。 IMG HOW DATATABLE LOOK IN EDGE IN FULL SIZE WINDOW, this way looks then window smaller IMG

我的代码 js

 var table = $('#example').DataTable( {
        "processing": true, 
        "serverSide": false,
        "sScrollX": "100%",
        "pageLength": 50,
        "order": [[ 3, "asc" ]],
        "ajax": url,
        'columnDefs': [
            { targets: 5, className:"truncate"},
 ],
        createdRow: function(row){
            var tr = $(row).find(".truncate");
            tr.attr("title", tr.html());
       }

css

  .truncate {
    max-width:50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

知道为什么这会在 chrome 浏览器中出现问题吗？然后在检查 html 代码看起来像列得到 .truncate class，但只有行必须有它而不是列。

谢谢你抽出时间

Answer 1

我只是尝试这种方式，并查看 chrome 和边缘工作。只需在 css 中设置此代码并删除你的

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

这里有更多信息CSS text-overflow in a table cell?

数据表特定列数据截断不适用于 chrome

Datatable specific column data truncate not work on chrome

javascript

css

datatable

google-chrome

microsoft-edge