Chrome更新后从DevTools复制CSS代码出现异常换行问题求助

该问题是Chrome 118及以上版本新增的CSS数值滚动调整特性导致的，DevTools会把数值和单位拆分为独立DOM节点，复制时会自动携带节点间的换行符，以下是可直接使用的修复方案：

修复方案 #

临时快速规避方法 #

• 不要直接拖拽选中整行CSS属性复制，改为双击DevTools里的CSS属性值区域，等全选整个完整值后按Ctrl+C（Windows）/Cmd+C（Mac）复制，粘贴就不会出现拆行问题
• 也可以右键点击对应CSS规则行，选择「复制声明」选项，一次性复制整行完整的CSS属性，不会出现数值和单位拆分的情况

永久关闭数值滚动调整功能（彻底解决根源问题） #

1. 打开DevTools，点击右上角的齿轮图标进入设置面板
2. 在「实验性」（Experiments）分类下，找到CSS数值悬停步进调整（英文版本对应为Enable CSS variable and unit value stepping on hover）或带「unit value scroll」「数值滚动调整」相关描述的选项，取消勾选
3. 关闭并重新打开DevTools即可生效，后续复制CSS不会再出现拆行问题

其他替代方案 #

• 如果不想关闭滚动调整功能，复制多条CSS规则时可以点击CSS规则块右上角的三个点按钮，选择「复制全部声明」批量复制，也能避免拆行问题
• 降级到Chrome 117之前的版本也可以解决，但不推荐，会丢失安全更新和其他新特性

内容的提问来源于stack exchange，提问作者Михайло Брич