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的更高杠杆发生了一些变化。

发生的事情是，我们使用了商店购买的主题（Metronic），该主题具有自定义CSS的FullCalendar外观。

然后我将以下代码添加到自定义CSS中，并解决了该问题。

.fc-time-grid-event .fc-content {
overflow: hidden;
max-height: 100%;

}

不确定这是否会帮助其他人，但您永远不会知道。