在handsontable中的自定义标题上换行答案

【问题标题】：Wrap text on custom headers in handsontable在handsontable中的自定义标题上换行
【发布时间】：2016-10-18 14:13:48
【问题描述】：

当给定 colWidths 时，有没有办法在 colHeaders 上自动换行？它似乎不起作用，甚至禁止手动减小列的大小。

相关选项：

hot = new Handsontable(container, {
    data: items,
    startRows: 1,
    minSpareRows: 1,
    colHeaders: ['aaaaaaaa', 'bbbbbbb', 'cccccccccccc'],
    colWidths: [50,50,50]
    manualColumnResize: true,
    autoWrapRow: true
}

【问题讨论】：

相关论坛帖子：forum.handsontable.com/t/header-word-wrap/209

标签： handsontable

【解决方案1】：

也许尝试在您的标题中添加一些 CSS：

.handsontable table thead th {
  white-space: pre-line;
  max-width: /* enter here your max header width */
}

【讨论】：

简单有效。
对于使用此 hack 的任何人，都有一个问题。因为 Handsontable 不是为了支持它而编写的，所以如果标题的高度高于 1 个单元格，则覆盖冻结的标题将失控。还需要一些额外的黑客攻击来纠正这个问题。

【解决方案2】：

试试下面的 CSS：

.handsontable th {
    white-space: normal!important;
}

演示和来源：http://jsfiddle.net/cyancscoutrfp/hqLbg3rt/

【讨论】：

代码 sn-pts

var notesElement = document.querySelector('#notesTblDiv'); var notesTbl = new Handsontable(notesElement, notesSettings);