加 overflow-x: auto 仍不横向滚动，因内容未自然撑宽容器，需禁换行、设固定宽、用 Flex 布局、移动端加 -webkit-overflow-scrolling: touch 并真机验证。
直接给目标容器加 overflow-x: auto 不够，必须同时切断子元素换行、约束内容总宽度、处理移动端滚动惯性，否则滚动条不出现、拖不动或卡在中间。
为什么加了 overflow-x: auto 还不横向滚动
浏览器不会凭空触发横向滚动——它只在「内部内容自然总宽度 > 容器 clientWidth」时才显示滚动条。常见失效原因：
-
white-space: normal（默认）导致子元素换行，内容没撑开 - 子元素用了
display: block或float，垂直堆叠而非水平排列 - 容器没设明确宽度（如只写
overflow-x: auto，没配width: 100%或max-width） -
table元素直接加overflow-x: auto无效，它会无视自身 overflow
用 Flex 布局实现可靠横向滚动
比 white-space: nowrap + inline-block 更可控，语义清晰，兼容性好（Chrome 29+/Firefox 28+/Safari 9+）。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 父容器加：
display: flex、flex-wrap: nowrap、overflow-x: auto、overflow-y: hidden - 子项加：
flex: 0 0 auto（禁缩放、禁拉伸、按内容宽） - 移动端必须加：
-webkit-overflow-scrolling: touch（iOS Safari 仍依赖） - 若要吸附对齐（如商品卡片停在左边缘），容器加
scroll-snap-type: x mandatory，子项加scroll-snap-align: start
表格局部横向滚动必须用外层 div 包裹
<table> 是独立格式化上下文，自身不响应 <code>overflow-x。必须靠外层容器接管滚动逻辑。
- 外层
<div class="table-wrapper"> 加：<code>overflow-x: auto、width: 100%、display: block、-webkit-overflow-scrolling: touch <table> 自身加：<code>display: block、min-width: max-content，并删掉width: 100%<th> 和 <code><td> 需统一设 <code>min-width（如min-width: 120px），避免列宽错位- 长文本单元格加：
max-width: 200px、overflow: hidden、text-overflow: ellipsis - WebKit（Chrome/Safari）：
::-webkit-scrollbar { width: 0; height: 0; } - Firefox：
scrollbar-width: none（写在容器上） - IE/Edge Legacy：不支持隐藏，只能接受原生样式
- 隐藏后仍支持鼠标滚轮、触摸拖拽、
element.scrollLeft编程控制
隐藏滚动条但保留滚动能力
隐藏不是为了“看起来干净”，而是避免滚动条挤占空间或干扰设计；但别误删 overflow-x: auto，否则真不能滚。
最易被忽略的是：移动端 iOS Safari 对横向滚动的限制比想象中深——哪怕所有 CSS 都写对了，缺了 -webkit-overflow-scrolling: touch 或 touch-action: pan-x，手指一划就卡住或回弹。真机测试前，务必确认这两项已生效。
