Javascript FullCalendar JS-时间网格上的样式问题

我正在使用FullCalendar插件：

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

下面是初始化日历的代码

 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>

.fc时间网格事件{
边缘底部：1px；
空白：nowrap；
}

老实说，我不喜欢这个解决方案，因为当eventdiv足够大时，它没有很好地包装文本

我已经检查了网站上的演示，当有一个长标题时，包装没有问题，所以这一定是我这边的一个错误

---

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

根据阿德森的评论，CSS在更高层次上发生了一些事情

结果是，我们使用了一个商店购买的主题（Metronic），它有定制的css来显示FullCalendar

然后我将下面的代码添加到自定义css中，它解决了这个问题

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

}

---

不确定这是否有助于其他人，但你永远不知道。

从屏幕截图上看，你的页面中可能有一些自定义CSS（通过fullCalendar主题，或对fullCalendar CSS文件的更改，或你自己添加的一些额外CSS）？或者您是否通过

eventRender

回调自定义了事件的外观？到目前为止，这些事情是导致这样一个问题的最有可能的原因。我注意到事件也出现在网格中稍微错误的位置，这是CSS问题的另一个症状。将它剥离回fullCalendar提供的原始默认CSS，看看您是否仍然存在问题。很棒的提示！现在就去试试，看看版面页面上是否有更高级的自定义css导致了这个问题。@ADyson你是对的。问题在于项目使用Metronic主题，该主题覆盖默认行为并导致问题。