制表符上的文本换行

Question

var table = new Tabulator("#example-table", {
  layout: "fitColumns", //fit columns to width of table
  height: "69vh",
  responsiveLayout: "collapse", //hide columns that dont fit on the table
  cellVertAlign: "middle",
  headerSort: false,

  columns: [
    {
      title: "title",
      field: "title",
      width: 300,
      sorter: "string",
      formatter(cell, formatterParams) {
        return `<p class="p-name-inside-table" contenteditable="true">${cell.getValue()}</p>`;
      }
    },
    {
      title: "body",
      field: "body",
      sorter: "string",
      formatter(cell, formatterParams) {
        return `<p class="p-name-inside-table" contenteditable="true">${cell.getValue()}</p>`;
      }
    }
  ]
});

$.ajax({
  type: "GET",
  url: "https://jsonplaceholder.typicode.com/posts",
  success: function (data) {
    setTimeout(() => {
      table.addData(data, false);
      table.restoreRedraw();
    }, 200);
  }
});

body {
  font-family: Arial;
}

h1 {
  text-align: center;
  margin: 0, auto;
}

.button {
  justify-content: center;
  margin: 10px;
  text-align: center;
}

.button button {
  margin: 10px;
  padding: 10px;
}

.p-name-inside-table {
  width: 100%;
  cursor: default !important;
}

.p-name-inside-table img {
  cursor: pointer !important;
}

<link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Tabulator</h1>

<div id="example-table"></div>

如何换行标题的行，使其不会在制表符上被截断？您可以看到行被截断，我在文档中找不到 (http://tabulator.info)

( ----这是为了避免“大部分是代码”错误-------------------------------- --------------------------------------------------)

Answer 1

一点点 CSS 就可以解决问题：

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    white-space: normal !important;
}