移动端DataTable文字响应式适配：解决文字截断问题

DataTables默认会给单元格添加white-space: nowrap样式，导致移动端长文本无法自动换行，以下两种方法可以解决这个问题：

方法1：自定义CSS强制换行 #

在<head>中添加自定义样式，覆盖DataTables的默认nowrap设置：

#dtab td {
  white-space: normal !important;
  word-wrap: break-word;
}

同时记得添加移动端viewport元标签，确保页面适配移动端宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

完整修改后的代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Datatable</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  
  <style>
    #dtab td {
      white-space: normal !important;
      word-wrap: break-word;
    }
  </style>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#dtab').DataTable();
    });
  </script>
</head>

<body>
  <div class="container mt-5">
    <table id="dtab" class="display" style="width:100%">
      <thead>
        <tr>
          <th>details</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Kings don home page 8082 eazy me go do far fu ez1</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

方法2：通过DataTables配置项禁用nowrap #

初始化DataTables时，使用内置的dt-body-normal类取消目标列的nowrap样式：

$(document).ready(function() {
  $('#dtab').DataTable({
    columnDefs: [
      // targets: 0 表示第一列（索引从0开始）
      { targets: 0, className: 'dt-body-normal' }
    ]
  });
});

这种方法不需要额外编写CSS，直接利用DataTables提供的样式类即可实现自动换行。

内容的提问来源于stack exchange，提问作者tom lee