推荐用 overflow: hidden + max-width: 0 + opacity: 0 + margin-left: -10px 组合隐藏文字，同时保持图标可见、布局稳定且支持过渡动画；需配合 white-space: nowrap、min-width: 0 和 transition-all 才能实现干净折叠。
折叠时文字消失但图标保留，怎么写CSS？
关键不是删文字，而是让它“不撑容器”+“不可见”。直接 display: none 会导致布局跳变、屏幕阅读器跳过整个菜单项，且无法过渡动画。
推荐组合：overflow: hidden + max-width: 0 + opacity: 0 + margin-left: -10px（抵消图标右侧空隙）。
-
.sidebar-item span必须设white-space: nowrap，否则小宽度下换行会破坏折叠效果 - 图标用内联
<i>或 SVG，别用background-image——缩小时尺寸难统一 - 媒体查询中改
.sidebar宽度时，span的max-width和opacity要同步切换，否则动画断层
Flexbox下侧边栏宽度动画失效，常见原因是什么？
flex-basis 动画不动，大概率不是 JS 问题，而是 Flex 布局根本没生效或单位不一致。
- 先确认父容器真有
display: flex和flex-direction: row（用开发者工具看 computed 样式） -
flex-basis: auto→flex-basis: 64px不可过渡；初始值必须写死，比如flex-basis: 240px - 侧边栏加
min-width: 0，否则内部文字或图标会强制撑宽，flex-basis再小也压不住 - 别同时设
width和flex-basis，前者会覆盖后者
用 max-w-0 折叠 Tailwind 侧边栏，为什么内容还露出来？
max-w-0 只限制最大宽度，不阻止内容溢出。单纯切类名，没配其他样式，就会漏内容。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
overflow-hidden，否则文字/图标在max-w-0下仍可能部分可见 - 避免用
w-0——它会让子元素 width 计算异常，尤其内含 flex 布局时 -
flex-shrink-0要加在侧边栏上，否则它可能被主内容区“挤扁”，导致折叠不彻底 -
main区域得用flex-1（不是flex: 1），否则侧边栏收缩后它不会自动占满剩余空间
移动端默认折叠、桌面端自动展开，怎么用媒体查询控制？
别靠 JS 判断屏幕尺寸再加类，用纯 CSS 更稳、更早生效，避免加载闪动。
- 侧边栏初始状态设
max-w-0 md:max-w-64：小屏max-w-0（折叠），桌面屏max-w-64（展开） - 主内容区加
flex-1，确保折叠后能撑满 - 如果需要点击展开，用布尔状态控制类名（如 React 的
isSidebarOpen），但基础响应式逻辑仍走 CSS - 别忘了给侧边栏加
transition-all，否则宽度变化是硬切，没有动画
min-width: 0 和 overflow-hidden 的组合——它们不出现在视觉稿里，但缺一不可。没加，折叠就“不干净”；加了，才能真正让内容退场而不留痕迹。 
