小程序表格被压扁、行内代码断行：两个 WXSS 改动

做 AI 提示词助手小程序时，对话页的 Markdown 渲染出过一个怪现象：解析器明明已经写对了，AI 返回的内容结构也没问题，可截图上一看，行内代码被从单词中间拦腰截断，表格的列也被压得看不清。这篇文章记录这两个样式坑是怎么定位、又是怎么只改 WXSS 修好的。

先说结论：解析器没错，错在两个样式属性

当时我先怀疑的是解析器：是不是行内代码的边界切错了，或者表格的列宽算错了。对着 md.js 的输出查了一遍，blocks 结构是对的——行内代码是一整段 code，表格的表头和每一行也都完整。那问题就不在解析，在渲染层。

最后定位到两个地方，都在 agentThread.wxss 里。修完只覆盖这一个文件，重新编译就好了，连 JS 都不用动。

坑一：行内代码从单词中间断开

截图里最显眼的是行内代码：update:modelValue 这种带冒号的标识符，被从中间截断成两行，前半截在行尾，后半截掉到下一行。读起来像是两个词，复制出来也是断的。

原因是 .md 上用了 word-break: break-all。这个属性的意思是：允许在任意两个字符之间断行。中文排版里它很常见，因为汉字之间本来就可以断；但行内代码里全是英文、冒号、下划线这种“一个整体”的词，break-all 一视同仁，行尾放不下就直接从中间切开。

改法是把换行规则换成 overflow-wrap: break-word：

• 平时不断词，update:modelValue 这种整体会尽量待在同一行；
• 只有遇到实在放不下的长串（比如一长串 URL）时，才在必要的位置断开，不让内容溢出容器。

一句话区别：break-all 是“哪里都能断”，break-word 是“尽量不断，非断不可才断”。行内代码要的是后者。

坑二：表格列被压扁，横向滚动滚不起来

第二个症状在表格上。AI 返回的表格列一多，每列都被压成很窄的一条，字挤在一起；更怪的是，外层明明做了横向滚动，却怎么都滚不动。

原因是单元格用了 flex: 1。flex: 1 的意思是所有单元格均分行宽，不管内容多长，每列都一样宽。列数一多，每列分到的宽度就很小，内容再长也被硬挤进去。而且因为所有列加起来的总宽永远等于屏幕宽，表格永远不会比容器宽，横向滚动自然也就没有滚动的余地——滚动条不是坏了，是根本没有超出部分可滚。

改法是把单元格改成 flex: none，让它按内容定宽：

• 列宽由内容决定，窄的列窄、宽的列宽，不再均分；
• 表格总宽超过屏幕时，横向滚动就恢复了，左右滑能看到后面的列；
• 再给每个单元格加一个 max-width: 560rpx 的上限，防止某个格子内容特别长时把表格撑得没边——超长内容在格内换行，而不是无限拉宽整张表。

flex: none + max-width 这对组合的意思就是：平时按内容来，极端情况有上限。

验证：覆盖一个文件，拿两张截图对照

改完的验证方法很简单，覆盖 agentThread.wxss 后重新编译，然后拿两个场景对照：

1. 找一段带 update:modelValue 这类长标识符的行内代码，看它是不是完整待在一行里；
2. 找一张列多、内容长的表格，左右滑一下，看横向滚动能不能滚到后面的列、格内长内容有没有换行而不是把表撑宽。

两个场景都通过，这次修复就算落地。以后再遇到“结构对、显示错”的情况，我会先查样式再查解析——渲染链路上，样式和解析是两层，定位时先分清是哪一层的问题，能少走很多弯路。

小结

这两个坑的共同点是：问题不在逻辑，在默认值。word-break: break-all 和 flex: 1 单独看都没错，放错地方就成了 bug。修的时候也不用重构，只改两个属性、加一个上限。做小程序对话页这类富文本渲染，解析器写对只是第一步，样式那一层同样值得逐行过一遍。