Firefox Quantum 57+：如何加宽地址栏并实现导航栏溢出换行？

我之前也折腾过Firefox Quantum的导航栏定制，刚好能解决你这个需求——通过修改userChrome.css实现地址栏自定义宽度，同时让导航栏里放不下的插件按钮自动换行成第二栏。下面是经过测试的可行方案：

第一步：开启Firefox自定义样式支持 #

• 打开Firefox，在地址栏输入 about:config 回车，找到配置项 toolkit.legacyUserProfileCustomizations.stylesheets，将其值设为 true。

第二步：找到并编辑userChrome.css #

• 输入 about:support 回车，找到「配置文件夹」选项，点击「打开文件夹」。
• 如果文件夹里没有chrome文件夹，就新建一个；在chrome文件夹内新建userChrome.css文件（注意后缀是.css，不是.txt）。

第三步：添加定制CSS代码 #

将以下代码粘贴到userChrome.css中：

/* 自定义地址栏宽度，可按需调整max-width数值 */
#urlbar-container {
  max-width: 600px !important;
  min-width: 300px !important; /* 可选：防止地址栏过窄 */
}

/* 允许导航栏内容自动换行，高度随内容自适应 */
#nav-bar {
  flex-wrap: wrap !important;
  height: auto !important;
  padding-bottom: 4px !important; /* 给第二栏预留底部间距 */
}

/* 让导航栏内的元素容器占满整行，确保换行后排列整齐 */
#nav-bar > .toolbar-items {
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* 可选：隐藏默认的溢出菜单按钮（三个点），因为现在内容会自动换行 */
#nav-overflow-button {
  display: none !important;
}

代码说明与调整建议 #

• 地址栏宽度：你可以修改#urlbar-container里的max-width数值（比如改成700px或550px），根据你的屏幕尺寸找到最适合的宽度；min-width是可选配置，防止地址栏被压缩得太窄。
• 换行核心：flex-wrap: wrap是实现自动换行的关键，配合height: auto让导航栏高度能容纳第二行内容，padding-bottom则是为了让第二栏和下方的书签栏等内容保持合适间距。
• 溢出按钮：如果还想保留默认的溢出菜单按钮（右侧的三个点），可以删掉最后一段代码；通常自动换行后这个按钮就没有存在的必要了。

生效方式 #

保存userChrome.css文件后，重启Firefox就能看到效果。如果个别插件按钮没有正常换行，可能是插件自身的样式限制，你可以用Firefox开发者工具查看该按钮的元素ID，添加flex-shrink: 1 !important样式来让它允许被压缩或换行。

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