WebStorm 默认仅折叠成对且非空的HTML标签，如<div>；自闭合标签（<br>）和纯文本内联标签（<span>text</span>）需启用Inline elements选项才可折叠，且Ctrl+.仅在光标位于标签内部或选中完整标签时生效。
WebStorm 默认能折叠 HTML 标签对，但不是所有标签都可折——关键看是否成对、是否启用 XML 折叠支持，且 <div> 这类常规块级元素能折，<br> 或 <img> 这类自闭合标签不能。
为什么 <div> 能折而 <span> 有时不响应
折叠行为取决于 WebStorm 对“XML tag contents”的识别策略：它默认只折叠有明确起止标记、且内容非空或含嵌套结构的标签。纯内联标签（如单行 <span>text</span>）可能被跳过，除非你启用了 Inline elements 折叠选项。
- 确保
Settings > Editor > General > Code Folding中已勾选XML tag contents（JSX 文件也靠它） -
<span>、<em>等短小内联标签需额外勾选Inline elements才支持折叠 - 标签内若只有文本、无子标签或换行，WebStorm 可能判定为“不可折叠节点”，快捷键
Ctrl + .无效 - 使用
<template>、<svg>或自定义元素时，只要语法合法，折叠通常正常
Ctrl + . 折叠 HTML 标签的实际操作条件
这个快捷键不是“点哪折哪”，而是依赖光标位置和节点边界。它只在光标落在标签内部（比如 <div>|<p>...</p></div> 的 | 处）或选中整个标签块时才生效。
- 光标必须在开始标签内、结束标签内，或选中从
<div>到</div>的完整范围 - 如果光标停在
<div class="foo">的属性部分（如class="foo"|），Ctrl + .不触发折叠 - 选中多行 HTML 后按
Ctrl + .，会尝试将选区整体作为自定义折叠区域（// region方式），而非按标签逻辑折叠 - 在 Vue / Svelte 单文件组件中，
<template>区域内的 HTML 折叠表现一致，但<script setup>内的 JSX-like 表达式需依赖 TypeScript 设置
批量折叠所有 HTML 标签用 Ctrl + Shift + -，但要注意这不等于“全收”
Ctrl + Shift + - 折叠的是当前文件中「所有已启用类型的可折叠区域」，包括 HTML 标签、JS 注释、函数体等——如果你没关掉其他折叠项，它会一并把 import 和 /* */ 注释也收起来。
立即学习“前端免费学习笔记（深入）”；
- 想只折 HTML 标签？先去
Settings > Editor > General > Code Folding，取消勾选Methods、Imports、Comments等无关项，只留XML tag contents - 折叠后，左侧出现的
⊖标记悬停会显示类似<div class="container"> (12 lines)的提示 - 按住
Alt并点击该⊖，可递归折叠其内部所有子标签（比如点外层<div>，连带里面五个<p>全部收起） - 注意：如果 HTML 是通过 JS 拼接字符串生成（如
html += '<div>...</div>'），WebStorm 不解析运行时内容，这类字符串不会被识别为可折叠标签
真正容易被忽略的是：HTML 折叠状态会随文件缓存保留。你关掉再重开，上次手动折叠的 <section> 还是收着的——这不是 bug，是设计；要彻底清空，得进 File > Invalidate Caches and Restart，或者临时禁用 XML tag contents 选项再重新启用。
