应同步调整 max-height、padding 和 line-height 等布局属性,而非仅调 font-size;否则会导致文字溢出、图标裁剪、滚动异常。

直接改 styles.less 里的容器尺寸,别碰 font-size —— 那只会让文字溢出、图标错位。
为什么只调 font-size 会出问题
autocomplete-plus 的弹窗是固定高度容器 + 绝对定位子元素。单纯放大字体,.suggestion-text 和 .suggestion-icon 的行高、内边距、max-height 全没变,结果就是文字顶到上边框、图标被裁掉、滚动条卡死。这不是“没生效”,是布局彻底乱了。
-
max-height不调:列表最多只显示 5–6 行,后面内容永远被截断 -
line-height不调:14px 字体配默认 1.0 行高,字挨得太紧,扫一眼分不清哪行是哪条建议 -
padding不调:图标和文字挤在边缘,高亮时视觉反馈弱,误点率上升
怎么安全地调大弹窗尺寸
打开 Atom 的 styles.less(Ctrl+Shift+P → Application: Open Your Stylesheet),在末尾加这几行:
.autocomplete-suggestion-list {
max-height: 420px;
}
.autocomplete-suggestion-list .suggestion-text,
.autocomplete-suggestion-list .suggestion-icon {
padding: 8px 14px;
}
.autocomplete-suggestion-list .suggestion-description {
font-size: 13px;
line-height: 1.6;
}
-
max-height建议设在 400–480px 之间:太小压不住长建议,太大在小屏上反而要滚动两次 -
padding改成8px 14px比默认更宽松,光标悬停高亮区域也变大,不容易滑脱 -
.suggestion-description单独调字号和行高:它通常比主文本小一号,但行高必须拉高,否则两行描述叠在一起
改完没反应?先查这三个地方
Atom 加载样式是自上而下覆盖,后写的规则优先级更高,但容易被其他主题强行打断:
- 检查是否被 UI 主题加了
!important:比如one-dark-ui某些旧版会锁死max-height,这时得在你自己的规则后加!important(仅限这一处) - 确认语法作用域匹配:如果你只在 JS 文件里补全,但写的是
.source.css .autocomplete-suggestion-list,那当然不生效——去掉语言前缀,用全局选择器 - 重启 autocomplete-plus:改完保存后按 Ctrl+Shift+P →
Autocomplete Plus: Reset Provider Cache,避免缓存旧样式结构
真正难的不是调数字,而是意识到弹窗不是“字体容器”,而是一套带约束的布局系统;max-height、line-height、padding 必须协同改动,缺一不可。











