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

【问题标题】：Datatable specific column data truncate not work on chrome数据表特定列数据截断不适用于 chrome
【发布时间】：2021-09-10 15:37:27
【问题描述】：

大约在一张嘴之前，在 chrome 中开始无法在 chrome 浏览器中使用我的截断功能，但在边缘看起来一切都很好。

在 chrome 中，我的数据表看起来像这样。 IMG HOW DATATABLE LOOK IN CHROME IN FULL SIZE WINDOW

在边缘和我想要的外观看起来像这样。 IMG HOW DATATABLE LOOK IN EDGE IN FULL SIZE WINDOW，这样看起来窗口更小了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 类，但只有行必须有它而不是列。

感谢您的宝贵时间

【问题讨论】：

标签： javascript css google-chrome datatable microsoft-edge

【解决方案1】：

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

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

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

【讨论】：