手机页面出现横向滚动条时，一句 overflow-x: hidden 往往只把证据藏起来。内容可能仍然越界，按钮也可能被裁掉。让 Claude 修复之前，先明确是哪个元素超过了容器，以及超长内容究竟应该换行、截断还是独立滚动。本文处理常见的附件卡片：左侧图标、右侧长文件名，在窄屏幕被撑开。
一 收集可以定位的上下文
给 Claude 卡片本身和父容器的 HTML、相关 CSS、实际视口宽度、一个足够长的文件名。只给截图时，模型只能猜测尺寸来源。把真实内部文件名替换为虚构长字符串，保留长度和字符类型即可。还要说明产品要求：文件名必须能完整阅读，按钮不能消失，不允许整页横向滚动。
在开发者工具中检查越界元素的计算样式，重点看固定宽度、white-space、Flex 或 Grid 子项的最小宽度。不要同时修改十几个断点，否则很难知道是哪一条真正解决了问题。
二 一个完整的修复样例
保存为 overflow-demo.html，用浏览器打开并调整到 320 CSS 像素宽。示例保留完整文件名，并使用换行处理长词。
<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>附件卡片窄屏示例</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 16px; font: 16px/1.6 system-ui; }
main { max-width: 720px; margin-inline: auto; }
.card { display: flex; gap: 12px; padding: 16px;
border: 1px solid #aaa; border-radius: 10px; }
.icon { flex: 0 0 32px; }
.content { flex: 1; min-width: 0; }
.filename { margin: 0; overflow-wrap: anywhere; }
.action { display: inline-block; margin-top: 12px; }
</style>
<main>
<h1>附件</h1>
<article class="card">
<span class="icon" aria-hidden="true">📄</span>
<div class="content">
<p class="filename">quarterly-research-ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-完整资料.pdf</p>
<a class="action" href="#details">查看说明</a>
</div>
</article>
<section id="details"><h2>附件说明</h2><p>这是布局练习用的虚构文件。</p></section>
</main>
</html>
关键是 .content 的 min-width: 0，允许 Flex 子项缩小；overflow-wrap: anywhere 则给长字符串提供断行机会。两者解决的层次不同。MDN 的 min-width 说明解释了 Flex 和 Grid 子项的自动最小尺寸；overflow-wrap 文档说明了长词换行行为。
三 可复制的 Claude 提示词
请定位这个附件卡片在 320 CSS 像素视口下的横向溢出原因。 要求：文件名完整可读、链接可见、整页不横向滚动；不通过裁剪 body 掩盖问题。 下面是包含父容器的 HTML、CSS 和虚构长文件名：[粘贴]。 先指出最可能越界的元素及依据，再给最小样式差异。 区分尺寸限制与文本换行，不引入框架或重做整页。 列出 320、375、768 像素下要检查的结果；截图无法证明的行为请标注待检查。
让 Claude 输出具体选择器和改动原因。如果它在所有元素上强加 word-break: break-all，检查普通英文单词是否变得难读；如果它改用省略号，确认这没有违反“完整文件名可读”的要求。
四 用量测与内容变体一起验收
在浏览器控制台比较 document.documentElement.scrollWidth 与 document.documentElement.clientWidth，前者超过后者说明页面仍可能有横向溢出。这个数值只是线索，不能替代目视检查：固定定位元素、弹层或局部滚动区还需单独看。
分别测试长英文、连续数字、中英文混排、短文件名和放大文字后的效果。检查链接能否用键盘到达，以及焦点轮廓是否被容器裁切。不要为了让某一张截图通过而写死卡片高度，真实文件名换行后高度会改变。
本文未进行真实浏览器截图或响应式测试，完整 HTML 与检查方法供你在目标环境验证。若溢出来自大表格或代码块，局部横向滚动可能是正确设计；本篇的换行策略不应机械套用到所有内容。修复后保留最容易撑破布局的虚构内容，作为后续视觉回归的固定样例。
五 把定位结果保留下来
在修复记录中写清视口、触发字符串、越界元素和改变的两条规则，比只留一张“修好了”的截图更容易复用。若同一组件在侧栏或弹窗里复现，比较的是可用容器宽度，而不只是整个浏览器宽度。固定宽度图标、容器间距和内边距会共同消耗空间；当剩余宽度已不足以阅读内容时，应讨论垂直排列等布局变化，而不是无限缩小字体。
方法参考：Anthropic 提示工程概览。