郭某人的网站

关于 / 留言

CKEditor 5 工具栏下拉菜单条目太多导致溢出问题

CKEditor 下拉菜单选项多放不下 溢出屏幕 解决方案


我在使用 CKEditor 5 时发现工具栏条目太多会导致溢出屏幕的问题,比如我在字体配置中加了 10 来个字体:

奇怪的是同样的下拉工具栏,像“插入代码块”功能的显示却是正常的:

这个功能在下拉条目很多时就能够正常显示出滚动条而不会溢出屏幕,在我研究时发现“插入代码块”功能的样式中多出了一点代码:

.ck.ck-code-block-dropdown .ck-dropdown__panel {
   max-height: 250px;
   overflow-x: hidden;
   overflow-y: auto;
}

正是这几行关键的样式代码决定了“插入代码块”功能的正常显示,反观“字体”功能的下拉菜单却没有这一关键代码,所以我就按照原有的命名和格式手动在页面中加入了关于“字体”下拉菜单的这一关键代码:

.ck.ck-font-family-dropdown .ck-dropdown__panel {
   max-height: 250px;
   overflow-x: hidden;
   overflow-y: auto;
}

修改经测试显示正常:


最后更新时间:2023/03/31 17:33

如果您喜欢此文章,或此文章给您带来了任何帮助,请考虑对我进行资金赞赏,您的支持将会成为我坚持的力量。

注意!你的赞赏转账请考虑再三后支付,此收款不作任何形式的退款。

网站维护预告

通知:

郭某人的网站将于 2025 年 6 月 9 日 12:00 开始进行站点维护,届时网站服务将会停止,整个过程预计持续 6 小时,请于此时间之后再访,希望你能理解。

郭某人