在VS Code中编辑HTML文件时，当元素的类名属性内容较长，编辑器会默认将超出的部分折叠显示为省略号，给代码查看和修改带来不便。我们可以通过调整配置解决这个问题。
问题产生的原因
VS Code内置的HTML语言服务会对长属性值做智能截断显示，目的是减少单行代码占用的横向空间，默认情况下类名超过一定长度就会触发这个折叠行为，属于编辑器的默认优化设置，并非代码语法错误。
方法一：修改用户设置
这是最直接的操作方式，适合大多数普通用户，步骤如下：
- 打开VS Code，按下快捷键
Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置面板 - 在搜索框中输入
html.format.wrapAttributes - 将该配置项的值修改为
preserve-aligned或者force-expand-multiline
如果要更精准控制类名显示，可以添加如下自定义配置到settings.json中：
{
// 禁止HTML属性值折叠显示
"html.format.wrapAttributes": "preserve-aligned",
// 关闭智能截断长属性
"editor.suggest.showSnippets": false,
// 调整编辑器渲染逻辑，避免属性值被省略
"editor.renderWhitespace": "none"
}
方法二：调整语言服务配置
如果修改通用设置后问题仍存在，可以尝试调整HTML语言服务的相关参数：
{
// 关闭HTML语言服务的属性值优化
"html.suggest.html5": true,
"html.validate.scripts": false,
"html.validate.styles": false,
// 禁止长属性自动折叠
"editor.wordWrap": "on",
"editor.wordWrapColumn": 200
}
方法三：使用插件辅助
如果上述配置调整都无法满足需求，可以安装HTML CSS Class Completion相关插件，部分插件提供了自定义类名显示长度的配置项，安装后进入插件设置页面，将类名最大显示长度调整为更大的数值即可。
验证配置是否生效
修改完配置后，重启VS Code，打开一个包含长类名的HTML文件，查看类名是否完整显示：
<div class="header navigation main-header sticky-header responsive-header dark-theme compact-header">
这是一个包含长类名的div元素
</div>
如果类名完整显示没有省略号，说明配置已经生效。如果仍有折叠，可以检查是否有其他插件覆盖了当前设置，或者将VS Code升级到最新版本后重新配置。