发布：更新：阅读：1928
编辑在电脑上预览文章时，三十多个字的标题往往只占两行。页面到了手机上，同一标题可能铺成四行，发布日期被挤到下一屏，正文首段也离标题越来越远。此时只看“页面能打开”没有意义，发布人员需要把标题区当成一个完整组件验收。
检查时不要换成“测试标题”。从待发布文章里挑最长的一条，连同栏目名、发布日期和阅读信息一起放进正式模板。浏览器开发工具至少设置 360px 和 390px 两种宽度，再用一台手机打开公开预览地址。开发工具能定位 CSS，真机可以看出系统字体、浏览器地址栏和缩放设置带来的差异。
记录标题实际占几行，也要记下标题容器的高度。中文标题通常可以自然换行，包含型号、英文系列名或连续数字时，还要观察长词是否撑宽页面。文章 H1 可使用 overflow-wrap:anywhere 处理异常长串，但不要给整个正文套 word-break:break-all，否则产品型号和英文单词会在难以辨认的位置断开。
标题字号和行高要一起看。字号缩小后能少一行，行高过紧却会让上下两行贴在一起。验收记录应保留 font-size、line-height、容器左右内边距和标题下边距。后续模板改版时，前端人员可以对照这些参数复现问题，不必重新猜测是哪条样式生效。
文章页的 H1 应显示完整标题，页面的 title、H1 与正文主题保持一致。为了省高度而隐藏 H1 后半段，会让读者看不到问题边界。若标题确实过长，编辑应删掉重复修饰词，保留业务对象和故障条件，再检查 description 是否准确承接正文。
栏目列表可以使用两行截断，但链接本身仍需保留完整标题。卡片采用两行 line-clamp 时，要同时检查图片高度、摘要起点和卡片间距；标题从一行变成两行后，摘要不能压到日期或下一张卡片。列表中的截断只负责排版，文章详情页不能沿用同一限制。
发布日期一栏容易在窄屏出问题。模板可以用 保存机器可读日期，并让元信息容器使用可换行布局。日期、更新时间和阅读量放不下一行时，应按既定间距换行，不能盖住标题，也不要用绝对定位把它们钉在固定坐标。
标题区下方还要检查首段位置。正文首段与元信息之间留出稳定间距即可，空白不应大到让读者误以为内容已经结束。页面带首图时，发布人员需核对图片宽高属性和 alt，再目测裁切方向；首图加载失败后，标题到正文的距离也不能突然塌陷。
一条可追溯的记录应写明文章 URL、模板文件、测试视口和发现的问题，并附上首屏截图。问题归属也要明确：标题文案交给编辑，卡片截断和元信息折行交给前端，图片尺寸则回到素材处理环节。记录里保留处理前后的截图，复查人员才能判断改动是否真的解决了遮挡。
验收时从栏目页进入文章，再返回列表核对卡片。手机端没有横向滚动，H1 能完整阅读，日期栏不重叠，首段在自然滚动范围内，才算这一页通过。桌面端仍要抽查一次，因为移动端样式调整可能影响宽屏行高和卡片高度。
标题内容变化、模板 CSS 更新或字体文件更换后，都应重新跑这张记录。复查范围跟着发生变化的组件收窄，原 URL 与发布日期继续保留，页面不会靠改日期伪装成新内容。
