网格卡片被长标题撑宽,应该从哪里排查?
三列卡片遇到连续英文就超出容器,给标题省略号也没有改善。记录最小尺寸约束的排查思路,以及兼顾完整阅读和布局稳定的处理方法。
问题出现的条件
我在练习页里使用三列等分网格,普通中文标题显示正常,但一张卡片放入连续英文项目名称后,整个页面出现横向滚动。桌面浏览器和手机上都能复现,缩小字号只能延后问题出现。预期是列宽保持均等,标题在卡片内部换行,而不是把其他卡片挤窄。
已经尝试的处理
最初给标题加了省略号和隐藏溢出,但外层网格仍然超出容器。我把图片和附加信息逐步移除,只留下卡片与标题,问题依旧存在,说明不是图片固有尺寸造成的。检查开发者工具后发现,某列的实际宽度大于我按容器宽度估算的结果。
验证后的处理方案
按照回复的建议,我将网格列的最小值设为零,并检查卡片作为网格子项时的最小宽度约束;标题则允许在必要时打断长单词。现在长英文不会继续撑大轨道,中文标题也能完整换行。若页面设计确实要求截断,还需要提供可以读取完整标题的方式,不能只让鼠标悬停用户看到。