当分隔线尚未移动时，如何在 fullCalendar 时间线视图中包装资源标题？答案

【问题标题】：How to wrap resource title in fullCalendar timeline view when the divider is not moved yet?当分隔线尚未移动时，如何在 fullCalendar 时间线视图中包装资源标题？
【发布时间】：2020-05-28 09:16:45
【问题描述】：

我在 React 中使用 FullCalendar，资源标题有时很长。用户可以在需要时移动分隔线，但我想要的是在资源标题不适合给定空间时包装资源标题。

有什么想法吗？

【问题讨论】：

标签： css reactjs fullcalendar fullcalendar-4

【解决方案1】：

一个选项是简单地使文本换行（默认情况下，它从其父元素继承一个不换行规则）：

.fc-cell-text
{
  white-space: normal;
}

若要在移动分隔线以缩小资源名称区域时阻止文本再次溢出，您还可以添加一个事件侦听器以使 fullCalendar 在单击分隔线时更新其大小：

document.addEventListener("click", function () {
  if (event.target.classList.contains("fc-divider")) {
    console.log("here");
    calendar.updateSize();
  }
});

演示：https://codepen.io/ADyson82/pen/KKdjzoW

【讨论】：

好的，但是当文本被换行时，它会溢出资源的高度，我试图通过获取元素然后更改样式来将高度设置为自动，但它不起作用。我在资源渲染函数中执行了以下操作： info.el.childNodes[0].style.height = 'auto';
它在我的演示中没有溢出 - 你看了吗？资源扩展其高度以适应它
当我第一次移动分隔线时，它会溢出，但是一旦我调整窗口大小，它就会调整高度。有没有办法在移动分隔线时强制调整（重新计算布局）？
对不起，我不太明白，你为什么要移动分隔线？正如我的演示所示，无需移动任何东西即可解决问题
没关系。有效;我在点击分隔线时添加了一个事件监听器，并调用了 updateSize() 函数。