如何修复JupyterLab中单元格与输出内容宽度显示异常问题

问题现象 #

• 单元格内输入字符过多时，虽会显示水平滚动条，但单元格自身宽度会同步增加
• 水平滚动条可滚动幅度极小，仅能覆盖数个字符的距离，不会随单元格宽度增大扩展滚动范围
• 输出场景下问题同样存在，展示包含大量列的pandas数据框时会稳定复现
• 已尝试重装JupyterLab、参考常规单元格宽度调整方法调试，均未解决问题
  

问题根因 #

该问题由JupyterLab前端样式规则冲突导致：单元格容器未配置固定最大宽度+横向溢出滚动的强约束，长内容会直接撑开容器宽度，滚动条仅在容器被撑到接近内容总宽度时才触发，因此剩余可滚动距离极小。

修复方案 #

方案1：临时修复（仅当前会话生效） #

在笔记本首个单元格运行以下代码，执行后刷新当前页面即可：

from IPython.core.display import display, HTML
display(HTML("""
<style>
/* 约束输入输出单元格最大宽度为浏览器可视区域宽度的98% */
.jp-Cell-inputWrapper, .jp-Cell-outputWrapper {
    max-width: 98vw !important;
    overflow-x: auto !important;
}
/* 阻止表格类输出（如pandas数据框）撑宽容器 */
.jp-RenderedHTMLCommon table {
    max-width: 100% !important;
}
/* 代码内容不自动换行，超出部分触发横向滚动 */
.CodeMirror pre, .jp-OutputArea pre {
    white-space: pre !important;
}
</style>
"""))

方案2：永久修复（所有笔记本自动生效） #

1. 打开终端执行命令查询JupyterLab配置路径：
   jupyter lab path
2. 在命令返回的应用目录路径下，依次进入lab/themes/@jupyterlab/文件夹，如果你使用浅色主题就进入theme-light-extension子文件夹，使用暗色主题则进入theme-dark-extension子文件夹
3. 在对应主题文件夹内找到或新建custom.css文件，将方案1中<style>标签内的CSS代码粘贴到文件中保存
4. 重启JupyterLab服务，重新打开笔记本即可永久生效

方案3：插件配置修复 #

在JupyterLab扩展市场搜索支持自定义单元格宽度的样式类插件，安装后在插件设置页将单元格最大宽度设置为适配浏览器窗口的固定值，同时开启长内容横向滚动开关即可。

内容的提问来源于stack exchange，提问作者Mpicukar