FullCalendar JS-TimeGrid上的样式问题

Question

我正在使用FullCalendar插件：https://fullcalendar.io/

由于某些原因，加载时间网格视图时，标题无法正确切断，如下面的屏幕截图所示

下面是初始化日历的代码

 function SetupAndRenderCalendar() {
    var calendarEl = document.getElementById('calendar');

    calendar = new FullCalendar.Calendar(calendarEl, {
        height: 'parent',
        plugins: ['dayGrid', 'timeGrid'],
        defaultView: 'dayGridMonth',
        header: { center: 'dayGridMonth,timeGridWeek' },
        minTime: "06:00:00",
        maxTime: "20:00:00",

    });

    calendar.render();
}

[我看过一些StackOverflow文章，建议像这样给css类一个自定义覆盖

<style>
.fc-time-grid-event {
    margin-bottom: 1px;
    white-space:nowrap;
}
</style>

老实说，当事件div足够大时，我不喜欢这种解决方案，因为它不能很好地包装文本。

我已经检查了网站上的演示，并且在标题较长的情况下，换行没有问题，因此，这肯定是我的错误。

所以问题是，我在做错什么，如何正确包装标题？

Answer 1

根据ADyson的评论，CSS的更高杠杆发生了一些变化。